/* Componentes do design system Caririensi (.cr-*) — cópia de docs/design-system/bundle.css por scripts/gerar-tokens.py. */
/* Caririensi — estilos dos componentes.
   Contrato: classes .cr-* usam SÓ variáveis de tokens.css (cores, espaços, raios, sombras, fontes).
   Servem ao tema de blocos caririensi-2026 e a qualquer HTML. */

.cr-root { font-family: var(--font-sans); color: var(--texto); }
.cr-row { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.cr-col { display: flex; flex-direction: column; gap: var(--espaco-3); align-items: flex-start; }
.cr-pad { padding: var(--espaco-6); }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-root a:focus-visible, .cr-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Sinal: as duas meias-luas do símbolo ---------- */
.cr-sinal { --cr-sinal: var(--verde-mangaba); display: inline-flex; gap: 2px; align-items: center; flex: none; height: 12px; }
.cr-sinal::before, .cr-sinal::after { content: ""; display: block; background: var(--cr-sinal); border-radius: 0 999px 999px 0; }
.cr-sinal::before { width: 5px; height: 12px; }
.cr-sinal::after { width: 3px; height: 8px; }
.cr-sinal--vivo::before { animation: cr-onda 1.6s ease-in-out infinite; }
.cr-sinal--vivo::after { animation: cr-onda 1.6s ease-in-out .3s infinite; }
@keyframes cr-onda { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- Ladrilho ---------- */
.cr-ladrilho { position: relative; isolation: isolate; }
.cr-ladrilho::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background: url("../img/ladrilho-cambui.svg") 0 0 / 160px 160px repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%); mask-image: linear-gradient(100deg, transparent 35%, #000 100%); }
.cr-ladrilho--claro::after { background-image: url("../img/ladrilho-cimento.svg"); opacity: .5; }
.cr-estudio { background: var(--superficie-marca); color: var(--on-marca); }

/* ---------- Logo ---------- */
.cr-logo { display: inline-block; line-height: 0; }
.cr-logo img { display: block; height: 100%; width: auto; }

/* ---------- Botão ---------- */
.cr-btn { --cr-bg: var(--marca); --cr-fg: var(--on-marca); --cr-bd: var(--marca);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: var(--alvo-toque); padding: 0 var(--espaco-6); border-radius: var(--raio-md);
  border: 2px solid var(--cr-bd); background: var(--cr-bg); color: var(--cr-fg);
  font: 700 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.cr-btn:hover { --cr-bg: var(--cambui-700); --cr-bd: var(--cambui-700); }
.cr-btn--destaque { --cr-bg: var(--destaque); --cr-fg: var(--on-destaque); --cr-bd: var(--destaque); }
.cr-btn--destaque:hover { --cr-bg: var(--mangaba-300); --cr-bd: var(--mangaba-300); }
.cr-btn--contorno { --cr-bg: transparent; --cr-fg: var(--marca-texto); --cr-bd: var(--linha-forte); }
.cr-btn--contorno:hover { --cr-bg: var(--marca-suave); --cr-bd: var(--marca-texto); }
.cr-btn--texto { --cr-bg: transparent; --cr-fg: var(--marca-texto); --cr-bd: transparent; padding: 0 var(--espaco-2); }
.cr-btn--texto:hover { --cr-bg: var(--marca-suave); --cr-bd: transparent; }
.cr-btn--sm { min-height: 36px; padding: 0 var(--espaco-4); font-size: 14px; }
.cr-btn svg { width: 20px; height: 20px; }

/* ---------- Editoria (chapéu) ---------- */
.cr-editoria { --cr-ed: var(--marca-texto); display: inline-flex; align-items: center; gap: var(--espaco-2);
  font: 800 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cr-ed); text-decoration: none; }
.cr-editoria .cr-sinal { --cr-sinal: var(--cr-ed); }
.cr-ed-cariri { --cr-ed: var(--ed-cariri); } .cr-ed-politica { --cr-ed: var(--ed-politica); }
.cr-ed-policial { --cr-ed: var(--ed-policial); } .cr-ed-esportes { --cr-ed: var(--ed-esportes); }
.cr-ed-ceara { --cr-ed: var(--ed-ceara); } .cr-ed-brasil { --cr-ed: var(--ed-brasil); }
.cr-ed-entretenimento { --cr-ed: var(--ed-entretenimento); } .cr-ed-mundo { --cr-ed: var(--ed-mundo); }
.cr-ed-opiniao { --cr-ed: var(--ed-opiniao); }
.cr-sobre-foto .cr-editoria, .cr-estudio .cr-editoria { --cr-ed: var(--on-marca); }
.cr-sobre-foto .cr-editoria .cr-sinal, .cr-estudio .cr-editoria .cr-sinal { --cr-sinal: var(--verde-mangaba); }

/* ---------- Selo ---------- */
.cr-selo { display: inline-flex; align-items: center; gap: var(--espaco-2); padding: 3px var(--espaco-2);
  border-radius: var(--raio-sm); font: 800 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.cr-selo--vivo { background: var(--destaque); color: var(--on-destaque); }
.cr-selo--vivo .cr-sinal { --cr-sinal: var(--on-destaque); height: 10px; }
.cr-selo--urgente { background: var(--urgente); color: var(--on-urgente); }
.cr-selo--exclusivo { background: var(--mangaba-50); color: var(--mangaba-700); box-shadow: inset 0 0 0 1px var(--mangaba-700); }
.cr-selo--atualizado { background: var(--marca-suave); color: var(--marca-texto); }
:is([data-theme="noite"], .tema-noite, html[data-fa-tema="escuro"]) .cr-selo--exclusivo { background: transparent; color: var(--destaque-texto); box-shadow: inset 0 0 0 1px var(--destaque-texto); }

/* ---------- Cabeça de seção ---------- */
.cr-secao { --cr-ed: var(--marca-texto); display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4);
  padding-bottom: var(--espaco-3); border-bottom: 2px solid var(--cr-ed); margin-bottom: var(--espaco-6); }
.cr-secao h2 { display: flex; align-items: center; gap: var(--espaco-3); margin: 0; font: 800 24px/30px var(--font-sans); color: var(--texto); letter-spacing: -0.01em; }
.cr-secao h2 .cr-sinal { --cr-sinal: var(--cr-ed); height: 16px; transform: scale(1.3); }
.cr-secao a { font: 700 14px/18px var(--font-sans); color: var(--marca-texto); text-decoration: none; }
.cr-secao a:hover { text-decoration: underline; }

/* ---------- Foto ---------- */
.cr-foto { position: relative; display: block; overflow: hidden; border-radius: var(--raio-md); background: var(--superficie-marca); aspect-ratio: 3 / 2; }
.cr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-foto--16x9 { aspect-ratio: 16 / 9; } .cr-foto--1x1 { aspect-ratio: 1 / 1; }
.cr-foto-vazia { display: grid; place-items: center; }
.cr-foto-vazia::before { content: ""; position: absolute; inset: 0; opacity: .3; background: url("../img/ladrilho-cambui.svg") 0 0 / 120px 120px repeat; }
.cr-foto-vazia::after { content: ""; position: relative; width: 22%; aspect-ratio: 1; background: url("../img/simbolo-mangaba.svg") center / contain no-repeat; }

/* ---------- Card de matéria ---------- */
.cr-card { display: flex; flex-direction: column; gap: var(--espaco-3); color: var(--texto); text-decoration: none; min-width: 0; }
.cr-card__titulo { margin: 0; font: 700 19px/25px var(--font-sans); color: var(--texto); text-wrap: pretty; }
.cr-card__titulo a { color: inherit; text-decoration: none; }
.cr-card__titulo a:hover { color: var(--marca-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cr-card__resumo { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--texto-suave); }
.cr-card__meta { font: 400 13px/18px var(--font-sans); color: var(--texto-suave); }
.cr-card__corpo { display: flex; flex-direction: column; gap: var(--espaco-2); min-width: 0; }
.cr-card--pequeno .cr-card__titulo { font-size: 16px; line-height: 22px; }
.cr-card--lado { flex-direction: row; align-items: flex-start; gap: var(--espaco-4); }
.cr-card--lado .cr-foto { flex: 0 0 34%; }
.cr-card--sobre-foto { position: relative; border-radius: var(--raio-lg); overflow: hidden; }
.cr-card--sobre-foto .cr-foto { border-radius: 0; aspect-ratio: 4 / 5; }
.cr-card--sobre-foto .cr-card__corpo { position: absolute; inset: auto 0 0 0; padding: var(--espaco-12) var(--espaco-6) var(--espaco-6);
  background: linear-gradient(180deg, rgba(0,33,28,0) 0%, rgba(0,33,28,.72) 40%, rgba(0,33,28,.94) 100%); }
.cr-card--sobre-foto .cr-card__titulo { color: var(--on-marca); font-size: 24px; line-height: 30px; }
.cr-card--sobre-foto .cr-card__meta { color: var(--cambui-100); }

/* ---------- Manchete ---------- */
.cr-manchete { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--espaco-6); }
.cr-manchete__principal { display: flex; flex-direction: column; gap: var(--espaco-4); }
.cr-manchete__principal .cr-foto { border-radius: var(--raio-lg); aspect-ratio: 16 / 9; }
.cr-manchete__principal .cr-card__titulo { font: 800 32px/38px var(--font-sans); letter-spacing: -0.01em; }
.cr-manchete__principal .cr-card__resumo { font-size: 16px; line-height: 26px; }
.cr-manchete__lado { display: flex; flex-direction: column; gap: var(--espaco-6); }
.cr-manchete__lado .cr-card + .cr-card { padding-top: var(--espaco-6); border-top: 1px solid var(--linha); }
@media (max-width: 760px) { .cr-manchete { grid-template-columns: 1fr; } .cr-manchete__principal .cr-card__titulo { font-size: 24px; line-height: 30px; } }

/* ---------- Lista Últimas ---------- */
.cr-ultimas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cr-ultimas li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--espaco-3); padding: var(--espaco-4) 0; border-bottom: 1px solid var(--linha); }
.cr-ultimas li:last-child { border-bottom: 0; }
.cr-ultimas time { font: 700 13px/22px var(--font-sans); color: var(--destaque-texto); font-variant-numeric: tabular-nums; }
.cr-ultimas a { font: 700 16px/22px var(--font-sans); color: var(--texto); text-decoration: none; }
.cr-ultimas a:hover { color: var(--marca-texto); text-decoration: underline; }
.cr-ultimas .cr-editoria { margin-bottom: 2px; font-size: 11px; }

/* ---------- Mais lidas ---------- */
.cr-mais-lidas { list-style: none; margin: 0; padding: 0; counter-reset: cr-ml; display: flex; flex-direction: column; gap: var(--espaco-5); }
.cr-mais-lidas li { counter-increment: cr-ml; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--espaco-3); align-items: start; }
.cr-mais-lidas li::before { content: counter(cr-ml); font: 800 32px/1 var(--font-sans); color: var(--destaque-texto); font-variant-numeric: tabular-nums; }
.cr-mais-lidas a { font: 700 16px/22px var(--font-sans); color: var(--texto); text-decoration: none; }
.cr-mais-lidas a:hover { color: var(--marca-texto); text-decoration: underline; }

/* ---------- Cabeçalho da matéria ---------- */
.cr-materia { max-width: var(--largura-texto); display: flex; flex-direction: column; gap: var(--espaco-4); }
.cr-materia__titulo { margin: 0; font: 800 44px/48px var(--font-sans); letter-spacing: -0.015em; color: var(--texto); text-wrap: balance; }
.cr-materia__fina { margin: 0; font: italic 400 20px/30px var(--font-sans); color: var(--texto-suave); }
.cr-materia__assinatura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-3);
  padding: var(--espaco-3) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.cr-materia__autor { display: flex; flex-direction: column; font: 400 13px/18px var(--font-sans); color: var(--texto-suave); }
.cr-materia__autor a { font-weight: 700; color: var(--texto); text-decoration: none; }
.cr-compartilhar { display: flex; gap: var(--espaco-2); }
.cr-compartilhar a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-pill); border: 1px solid var(--linha-forte); color: var(--texto); }
.cr-compartilhar a:hover { background: var(--marca-suave); border-color: var(--marca-texto); color: var(--marca-texto); }
.cr-compartilhar svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .cr-materia__titulo { font-size: 32px; line-height: 36px; } }

/* ---------- Texto da matéria ---------- */
.cr-texto { max-width: var(--largura-texto); font: 400 19px/32px var(--font-serif); color: var(--texto); }
.cr-texto p { margin: 0 0 var(--espaco-6); }
.cr-texto h2 { margin: var(--espaco-10) 0 var(--espaco-4); font: 700 24px/30px var(--font-sans); }
.cr-texto a { color: var(--marca-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 760px) { .cr-texto { font-size: 18px; line-height: 30px; } }

/* ---------- Legenda ---------- */
.cr-figura { margin: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.cr-legenda { font: italic 400 13px/19px var(--font-sans); color: var(--texto-suave); }
.cr-legenda b { font-style: normal; font-weight: 700; }

/* ---------- Citação ---------- */
.cr-citacao { margin: var(--espaco-8) 0; padding: var(--espaco-6) 0 var(--espaco-6) var(--espaco-8); position: relative; max-width: var(--largura-texto); }
.cr-citacao::before { content: ""; position: absolute; left: 0; top: var(--espaco-6); width: 10px; height: 30px; background: var(--destaque); border-radius: 0 999px 999px 0; }
.cr-citacao p { margin: 0; font: italic 300 24px/34px var(--font-serif); color: var(--texto); }
.cr-citacao cite { display: block; margin-top: var(--espaco-3); font: normal 700 14px/18px var(--font-sans); color: var(--texto-suave); }

/* ---------- Caixa do autor ---------- */
.cr-autor { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--espaco-4); align-items: start;
  padding: var(--espaco-6); border-radius: var(--raio-lg); background: var(--fundo-alt); max-width: var(--largura-texto); }
.cr-autor__foto { width: 64px; height: 64px; border-radius: var(--raio-pill); background: var(--superficie-marca); display: grid; place-items: center;
  color: var(--verde-mangaba); font: 800 22px/1 var(--font-sans); overflow: hidden; }
.cr-autor__foto img { width: 100%; height: 100%; object-fit: cover; }
.cr-autor__nome { margin: 0; font: 700 16px/22px var(--font-sans); color: var(--texto); }
.cr-autor__cargo { font: 400 13px/18px var(--font-sans); color: var(--texto-suave); }
.cr-autor__bio { margin: var(--espaco-2) 0 0; font: 400 14px/21px var(--font-sans); color: var(--texto); }

/* ---------- Anúncio ---------- */
.cr-anuncio { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-1); margin: var(--espaco-8) auto; }
.cr-anuncio__rotulo { font: 700 10px/14px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.cr-anuncio__espaco { display: grid; place-items: center; border-radius: var(--raio-md); background: var(--fundo-alt); color: var(--texto-suave); font: 400 13px/18px var(--font-sans); max-width: 100%; }

/* ---------- Faixa Central Caririensi ---------- */
.cr-faixa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-6);
  padding: var(--espaco-6) var(--espaco-8); border-radius: var(--raio-lg); overflow: hidden; }
.cr-faixa__marca { width: 56px; height: 56px; }
.cr-faixa__titulo { margin: 0; font: 800 24px/30px var(--font-sans); color: var(--on-marca); }
.cr-faixa__info { margin: var(--espaco-1) 0 0; font: 400 14px/21px var(--font-sans); color: var(--cambui-100); }
.cr-faixa__info b { color: var(--mangaba-300); font-weight: 700; }
@media (max-width: 760px) { .cr-faixa { grid-template-columns: 1fr; padding: var(--espaco-6); } .cr-faixa__marca { display: none; } }

/* ---------- Cabeçalho do site ---------- */
.cr-cabecalho { background: var(--superficie-marca); color: var(--on-marca); }
.cr-cabecalho__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-6);
  max-width: var(--largura-site); margin: 0 auto; padding: 0 var(--espaco-8); min-height: var(--altura-cabecalho); }
.cr-cabecalho__menu { display: flex; gap: var(--espaco-6); list-style: none; margin: 0; padding: 0; }
.cr-cabecalho__menu a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); font: 700 14px/18px var(--font-sans); color: var(--on-marca); text-decoration: none; border-bottom: 3px solid transparent; }
.cr-cabecalho__menu a:hover, .cr-cabecalho__menu a[aria-current="page"] { border-bottom-color: var(--destaque); }
.cr-cabecalho__acoes { display: flex; align-items: center; gap: var(--espaco-3); }
.cr-icone-btn { display: grid; place-items: center; width: var(--alvo-toque); height: var(--alvo-toque); border-radius: var(--raio-pill); border: 0; background: transparent; color: var(--on-marca); cursor: pointer; }
.cr-icone-btn:hover { background: rgba(255,255,255,.1); }
.cr-icone-btn svg { width: 22px; height: 22px; }
.cr-cabecalho__data { font: 400 13px/18px var(--font-sans); color: var(--cambui-100); }
@media (max-width: 760px) { .cr-cabecalho__barra { padding: 0 var(--espaco-4); min-height: 56px; } .cr-cabecalho__menu, .cr-so-desktop { display: none; } }

/* ---------- Rodapé ---------- */
.cr-rodape { background: var(--superficie-marca); color: var(--on-marca); }
.cr-rodape__grade { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--espaco-8);
  max-width: var(--largura-site); margin: 0 auto; padding: var(--espaco-16) var(--espaco-8) var(--espaco-10); }
.cr-rodape h3 { margin: 0 0 var(--espaco-4); font: 800 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mangaba-300); }
.cr-rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.cr-rodape a { color: var(--on-marca); text-decoration: none; font: 400 14px/21px var(--font-sans); }
.cr-rodape a:hover { text-decoration: underline; }
.cr-rodape__sobre { font: 400 14px/21px var(--font-sans); color: var(--cambui-100); margin: var(--espaco-4) 0 0; }
.cr-rodape__base { max-width: var(--largura-site); margin: 0 auto; padding: var(--espaco-6) var(--espaco-8); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-3); font: 400 13px/18px var(--font-sans); color: var(--cambui-100); }
@media (max-width: 760px) { .cr-rodape__grade { grid-template-columns: 1fr 1fr; padding: var(--espaco-10) var(--espaco-4); } .cr-rodape__grade > :first-child { grid-column: 1 / -1; } .cr-rodape__base { padding: var(--espaco-6) var(--espaco-4); } }

@media (prefers-reduced-motion: reduce) { .cr-sinal--vivo::before, .cr-sinal--vivo::after { animation: none; } .cr-btn { transition: none; } }