@font-face { font-family:"Anton"; src:url("/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Atkinson"; src:url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Atkinson"; src:url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --red:#D9142B; --red-deep:#8E0A1C; --tint:#FDEBED; --line:#F0C3C9;
  --ink:#1E1214; --mute:#6B5559; --zap:#14803C; --zap-deep:#0E6330; --white:#fff;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --body:"Atkinson","Segoe UI",system-ui,sans-serif;
}
* { box-sizing:border-box; }
html { font-size:18px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--body); color:var(--ink); background:var(--white); line-height:1.45; }
a { color:var(--red-deep); }
img, video { max-width:100%; }
:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }

.wrap { max-width:640px; margin:0 auto; padding:0 16px; }
.sr { position:absolute; left:-9999px; }

/* ---------- topo ---------- */
.topo { background:var(--red); color:var(--white); }
.topo .wrap { display:flex; align-items:center; justify-content:space-between; min-height:56px; }
.topo a { color:var(--white); text-decoration:none; }
.marca { font-family:var(--display); font-size:1.35rem; letter-spacing:.02em; line-height:1; }
.marca b { background:var(--white); color:var(--red); padding:1px 7px 2px; margin-left:6px; border-radius:4px; font-weight:400; }
.topo .voltar { font-weight:700; font-size:.95rem; padding:10px 0; }

/* ---------- hero ---------- */
.hero { background:var(--red); color:var(--white); padding:8px 0 40px; position:relative; overflow:hidden; }
.hero h1 { font-family:var(--display); font-weight:400; font-size:3.4rem; line-height:.98; margin:12px 0 14px; letter-spacing:.01em; padding-right:96px; }
.hero p { margin:0 0 20px; font-size:1.08rem; max-width:28ch; }
.hero .selo13 { position:absolute; right:14px; top:26px; width:92px; height:92px; border-radius:50%; background:var(--white); color:var(--red);
  display:grid; place-items:center; font-family:var(--display); font-size:2.7rem; transform:rotate(-9deg); box-shadow:0 0 0 4px var(--red-deep); }
.busca { display:flex; background:var(--white); border-radius:14px; padding:4px; }
.busca input { flex:1; min-width:0; border:0; background:none; font:inherit; font-size:1.05rem; padding:12px; color:var(--ink); }
.busca input:focus-visible { outline:none; }
.busca:focus-within { outline:3px solid var(--ink); outline-offset:2px; }
.busca button { border:0; background:var(--red-deep); color:var(--white); font:inherit; font-weight:700; padding:0 18px; border-radius:10px; cursor:pointer; min-height:48px; }

/* ---------- seções da home ---------- */
.secao-titulo { font-family:var(--display); font-weight:400; font-size:1.7rem; margin:28px 0 12px; line-height:1.05; }
.telhas { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; list-style:none; }
.telhas a { display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:104px; padding:14px; border-radius:16px;
  background:var(--tint); border:2px solid var(--line); color:var(--ink); text-decoration:none; font-weight:700; line-height:1.15; }
.telhas a:active { background:var(--line); }
.telhas .emo { font-size:1.9rem; line-height:1; }
.telhas li:first-child { grid-column:1 / -1; }
.telhas li:first-child a { flex-direction:row; align-items:center; background:var(--red-deep); border-color:var(--red-deep); color:var(--white); min-height:84px; font-size:1.2rem; }

/* ---------- feed e cards ---------- */
.feed { display:grid; gap:18px; }
.cartao { background:var(--white); border:2px solid var(--line); border-radius:18px; overflow:hidden; }
.cartao .midia { position:relative; background:var(--ink); }
.cartao video, .cartao img.foto { display:block; width:100%; max-height:70vh; object-fit:contain; background:var(--ink); }
.cartao a.capa { display:block; position:relative; text-decoration:none; color:var(--white); }
.cartao a.capa img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.cartao a.capa .sem-capa { aspect-ratio:16/10; background:var(--red-deep); display:grid; place-items:center; align-content:center; gap:6px;
  font-family:var(--display); font-size:2.2rem; text-align:center; padding:12px; }
.cartao a.capa .play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.cartao a.capa .play span { width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; font-size:1.4rem; padding-left:4px; }
.cartao .plat { position:absolute; left:10px; top:10px; background:var(--white); color:var(--ink); font-weight:700; font-size:.85rem; padding:3px 10px; border-radius:99px; }
.cartao .corpo { padding:14px 14px 12px; }
.cartao h3 { margin:0 0 6px; font-size:1.18rem; line-height:1.2; }
.cartao .leg { margin:0 0 10px; color:var(--mute); }
.selo { display:inline-flex; align-items:center; gap:6px; background:#E7F5EC; color:var(--zap-deep); font-weight:700; font-size:.85rem; padding:3px 10px 3px 8px; border-radius:99px; margin:0 0 10px; }
.selo svg { width:16px; height:16px; flex:none; }
.botoes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.botoes .zap { grid-column:1 / -1; }
.botoes > :nth-child(2):last-child { grid-column:1 / -1; }
.cartao a.capa .sem-capa ~ .play { display:none; }
.mini { display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; }
.mini a, .mini button { background:none; border:0; padding:6px 0; font:inherit; font-size:.9rem; color:var(--mute); text-decoration:underline; cursor:pointer; }

/* ---------- botões ---------- */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:12px 16px; width:100%; font:inherit; font-weight:700; font-size:1.05rem;
  color:var(--red-deep); background:var(--white); border:2px solid var(--red); border-radius:14px; text-decoration:none; cursor:pointer; text-align:center; }
.btn:disabled { opacity:.6; cursor:default; }
.btn.zap { background:var(--zap); border-color:var(--zap); color:var(--white); font-size:1.15rem; min-height:58px; }
.btn.zap:active { background:var(--zap-deep); }
.btn.vermelho { background:var(--red); border-color:var(--red); color:var(--white); }
.btn.cinza { border-color:var(--line); color:var(--ink); }
.btn.pequeno { min-height:44px; width:auto; padding:8px 14px; font-size:.95rem; }

/* ---------- barra flutuante ---------- */
.flutua { position:fixed; right:14px; bottom:14px; z-index:5; background:var(--red); color:var(--white); text-decoration:none; font-weight:700;
  padding:14px 20px; border-radius:99px; box-shadow:0 4px 14px rgba(142,10,28,.45); border:2px solid var(--white); }

/* ---------- páginas internas ---------- */
main.wrap { padding-block:20px 96px; }
h1.pagina, h2.pagina { font-family:var(--display); font-weight:400; font-size:2rem; line-height:1.05; margin:4px 0 16px; }
.aviso { background:var(--tint); border-left:5px solid var(--red); padding:12px 14px; border-radius:10px; margin:0 0 16px; }
.erro { background:#FFF1F1; border:2px solid var(--red); color:var(--red-deep); padding:12px 14px; border-radius:12px; margin:12px 0; }
.sucesso { background:#E7F5EC; border:2px solid var(--zap); color:var(--zap-deep); padding:14px; border-radius:12px; margin:12px 0; font-weight:700; }
.vazio { text-align:center; color:var(--mute); padding:28px 8px; }

label { display:block; font-weight:700; margin:18px 0 6px; }
.dica { font-weight:400; font-size:.88rem; color:var(--mute); display:block; margin-top:2px; }
input[type=text], input[type=url], input[type=password], select, textarea {
  width:100%; min-height:52px; padding:12px; font:inherit; border:2px solid #B9A3A7; border-radius:12px; background:var(--white); color:inherit; }
textarea { min-height:90px; resize:vertical; }
input[type=file] { width:100%; padding:10px 0; font:inherit; }
.segmentos { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin:0; }
.segmentos label { margin:0; font-weight:700; text-align:center; padding:12px 6px; border:2px solid var(--line); border-radius:12px; cursor:pointer; line-height:1.2; }
.segmentos input { position:absolute; opacity:0; pointer-events:none; }
.segmentos input:checked + span, .segmentos label:has(input:checked) { background:var(--red); border-color:var(--red); color:var(--white); }
.segmentos label:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:2px; }
progress { width:100%; height:16px; margin:10px 0; accent-color:var(--red); }

.rodape { color:var(--mute); font-size:.82rem; padding-block:8px 40px; }

@media (min-width:560px) {
  .hero h1 { font-size:4.2rem; padding-right:130px; }
  .hero .selo13 { width:116px; height:116px; font-size:3.4rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }