/* Site da Breaking IA (index.html) e página de links (links/). Celular primeiro: margem de 16 px e nada de rolagem para o lado.
   Branco dominante, Anton nas manchetes, Archivo no texto, vermelho só no essencial e um amarelo por bloco. */

:root {
  --branco: #FFFFFF; --vermelho: #E3120B; --preto: #0B0B0B; --amarelo: #FFE600; --gelo: #F2F2F2;
  --suave: #4A4A4A; --apagado: #7A7A7A; --linha: #E2E2E2; --margem: 16px; --largura: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--branco); color: var(--preto); font-family: Archivo, system-ui, sans-serif; font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }
.anton { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; line-height: .94; letter-spacing: .005em; }
.vermelho { color: var(--vermelho); }
.miolo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* marca */
.logo { display: inline-flex; transform: skewX(-8deg); font-family: Anton, sans-serif; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; }
.logo b { font-weight: 400; background: var(--preto); color: var(--branco); padding: .2273em .3182em .1818em; }
.logo i { font-style: normal; background: var(--amarelo); color: var(--preto); padding: .2273em .3182em .1818em; }
.chip { display: inline-flex; align-items: center; gap: .4286em; height: 2.2143em; padding: 0 .7143em; background: var(--vermelho); color: var(--branco); font-weight: 900; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.chip::before { content: ""; width: .5714em; height: .5714em; border-radius: 50%; background: currentColor; flex: none; animation: pisca 1s steps(1) infinite; }
.aba { display: inline-flex; align-items: center; gap: .4em; height: 2.0667em; padding: 0 .6667em; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.aba i { width: .5333em; height: .5333em; border-radius: 50%; flex: none; }
.carimbo { display: inline-block; font: 400 1em/1 Anton, sans-serif; text-transform: uppercase; padding: .16em .355em .065em; border: .113em solid var(--vermelho); color: var(--vermelho); background: var(--amarelo); transform: rotate(-8deg); white-space: nowrap; }
.exemplo-tag { display: inline-block; font: 900 12px/1 Archivo, sans-serif; letter-spacing: .08em; text-transform: uppercase; background: var(--preto); color: var(--branco); padding: 6px 8px; }
@keyframes pisca { 50% { opacity: 0; } }

/* topo e letreiro */
.topo { position: sticky; top: 0; z-index: 10; background: var(--branco); border-bottom: 1px solid var(--linha); }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.topo .logo { font-size: 22px; margin-left: 4px; }
.topo nav { display: none; gap: 22px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.topo nav a { text-decoration: none; }
.topo nav a:hover { color: var(--vermelho); }
.topo .chip { font-size: 13px; }
.letreiro { display: flex; align-items: center; height: 44px; background: var(--preto); color: var(--branco); overflow: hidden; }
.letreiro .rot { height: 100%; display: flex; align-items: center; padding: 0 14px; background: var(--vermelho); font: 400 20px/1 Anton, sans-serif; text-transform: uppercase; flex: none; }
.letreiro .txt { flex: 1; overflow: hidden; white-space: nowrap; font: 900 15px/1.6 Archivo, sans-serif; font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; }
.letreiro .txt span { display: inline-block; padding-left: 16px; animation: corre 40s linear infinite; }
@keyframes corre { to { transform: translateX(-50%); } }

/* abertura */
.abre { padding: 36px 0 44px; }
.abre .miolo { display: grid; gap: 32px; }
.abre h1 { margin: 16px 0 0; font: 400 clamp(52px, 13vw, 104px)/.9 Anton, sans-serif; text-transform: uppercase; text-wrap: balance; }
.abre p { margin: 18px 0 0; font-size: clamp(18px, 2.2vw, 21px); font-weight: 600; color: var(--suave); max-width: 560px; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; background: var(--preto); color: var(--branco); font-weight: 900; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border: 3px solid var(--preto); cursor: pointer; }
.botao:hover { background: var(--vermelho); border-color: var(--vermelho); }
.botao.claro { background: var(--branco); color: var(--preto); }
.botao.claro:hover { background: var(--amarelo); border-color: var(--preto); }
.ultima { display: block; text-decoration: none; border: 1px solid var(--linha); }

/* cartão de plantão: foto, aba, faixa branca */
.plantao { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--linha); min-width: 0; }
.plantao .foto { position: relative; aspect-ratio: 4 / 3; background: var(--gelo); overflow: hidden; }
.plantao .foto img { width: 100%; height: 100%; object-fit: cover; }
.plantao .foto .aba { position: absolute; left: 16px; bottom: 0; }
.plantao .sem-foto { position: relative; aspect-ratio: 4 / 3; background: var(--gelo); display: flex; align-items: center; padding: 24px 20px 40px; }
.plantao .sem-foto b { font: 400 clamp(64px, 17vw, 104px)/1 Anton, sans-serif; text-transform: uppercase; color: var(--vermelho); text-wrap: balance; }
.plantao .sem-foto .aba { position: absolute; left: 16px; bottom: 0; }
.plantao .corpo { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plantao .data { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.plantao h2, .plantao h3 { margin: 0; font: 400 clamp(30px, 7.4vw, 38px)/.95 Anton, sans-serif; text-transform: uppercase; text-wrap: balance; }
.plantao p { margin: 0; font-size: 16px; font-weight: 600; }
.plantao .calma { background: var(--gelo); border-left: 6px solid var(--vermelho); padding: 10px 12px; font-size: 14.5px; font-weight: 600; }
.plantao .calma b { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.plantao .fontes { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--suave); overflow-wrap: anywhere; }
.plantao .fontes a { font-weight: 800; }
.plantao .checado { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.plantao .checado span { color: var(--vermelho); }

/* seções */
.secao { padding: 52px 0; border-top: 1px solid var(--linha); }
.secao h2 { margin: 12px 0 8px; font: 400 clamp(40px, 9vw, 72px)/.92 Anton, sans-serif; text-transform: uppercase; text-wrap: balance; }
.secao .intro { margin: 0 0 28px; max-width: 640px; color: var(--suave); font-weight: 600; }
.lista { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

/* real ou IA? */
.quiz { border: 4px solid var(--preto); box-shadow: 10px 10px 0 var(--amarelo); background: var(--branco); margin-right: 10px; max-width: 560px; }
.quiz-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 4px solid var(--preto); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.quiz-foto { position: relative; aspect-ratio: 1 / 1; background: var(--gelo); overflow: hidden; }
.quiz-foto img { width: 100%; height: 100%; object-fit: cover; }
.quiz-foto .carimbo { position: absolute; right: 6%; bottom: 10%; font-size: clamp(30px, 8vw, 54px); }
.quiz-corpo { padding: 18px 16px 20px; }
.quiz-corpo h3 { margin: 0; font: 400 clamp(32px, 8vw, 46px)/.95 Anton, sans-serif; text-transform: uppercase; }
.quiz-corpo p { margin: 10px 0 0; font-weight: 600; }
.quiz-corpo .origem { font-size: 13px; color: var(--suave); overflow-wrap: anywhere; }
.quiz .botoes { margin-top: 16px; }
.quiz .botoes .botao { flex: 1 1 140px; font-size: 18px; min-height: 60px; }
.quiz .resultado b { font: 400 clamp(40px, 10vw, 64px)/.92 Anton, sans-serif; text-transform: uppercase; display: block; }
.dicas { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dicas li { background: var(--gelo); padding: 12px 14px; font-size: 15px; font-weight: 600; }
.dicas li b { font-weight: 900; }

/* checagem */
.regra-casa { position: relative; background: var(--gelo); border-left: 12px solid var(--vermelho); padding: 28px 20px 24px; margin-bottom: 24px; }
.regra-casa b { display: block; font: 400 clamp(36px, 9vw, 72px)/.92 Anton, sans-serif; text-transform: uppercase; text-wrap: balance; }
.regra-casa .carimbo { position: absolute; right: 14px; top: -16px; font-size: 22px; }
.compromissos { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 12px; }
.compromissos li { counter-increment: c; border: 1px solid var(--linha); padding: 18px 16px; }
.compromissos li::before { content: counter(c, decimal-leading-zero); display: block; font: 400 30px/1 Anton, sans-serif; color: var(--vermelho); margin-bottom: 6px; }
.compromissos b { display: block; font-size: 18px; font-weight: 900; }
.compromissos span { display: block; margin-top: 4px; font-size: 15px; color: var(--suave); }
.compromissos span.exemplo-tag { display: inline-block; margin: 0; font-size: 11px; color: var(--branco); }
.selos { margin-top: 28px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.selos div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0; border-top: 1px solid var(--linha); }
.selos p { margin: 0; font-size: 14.5px; color: var(--suave); }
.vazio { background: var(--gelo); padding: 22px 18px; font-weight: 600; }

/* rodapé */
.rodape { background: var(--preto); color: var(--branco); padding: 40px 0 32px; }
.rodape .logo { font-size: 30px; }
.rodape .logo b { background: var(--branco); color: var(--preto); }
.rodape p { margin: 14px 0 0; color: #CFCFCF; font-size: 15px; }
.rodape ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rodape ul a { text-decoration: none; }
.rodape ul a:hover { color: var(--amarelo); }
.rodape small { display: block; margin-top: 28px; color: #9A9A9A; font-size: 13px; }

@media (min-width: 700px) {
  :root { --margem: 32px; }
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compromissos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .quiz-corpo { padding: 22px 24px 26px; }
}
@media (min-width: 1000px) {
  .topo nav { display: flex; }
  .abre { padding: 56px 0 64px; }
  .abre .miolo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compromissos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quiz-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .letreiro .txt span, .chip::before { animation: none; }
}