/* Site do Exercise Snacks. Mesma identidade do app: cores das anilhas de competição (azul
   força, amarelo mobilidade, verde feito, vermelho pendente), Barlow Condensed nos títulos e
   números, fonte do sistema no corpo. */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("/fontes/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fontes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fontes/barlow-condensed-700.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --piso: #eceef1;
  --placa: #ffffff;
  --placa-2: #f4f5f7;
  --linha: #d6dae1;
  --linha-forte: #a9b1be;
  --texto: #171b22;
  --texto-2: #586172;
  --aco: #9aa2ae;
  --aco-escuro: #646d7b;
  --azul: #2462c8;
  --azul-fundo: #2462c816;
  --amarelo: #f0b90b;
  --amarelo-texto: #8a6400;
  --amarelo-fundo: #f0b90b24;
  --verde: #1d9a52;
  --verde-fundo: #1d9a521c;
  --vermelho: #d4352d;
  --vermelho-fundo: #d4352d16;
  --display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --corpo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sombra-tela: 0 30px 60px -30px rgba(23, 27, 34, .45);
}
@media (prefers-color-scheme: dark) {
  :root {
    --piso: #1a1d23;
    --placa: #22262e;
    --placa-2: #2a2f38;
    --linha: #353b46;
    --linha-forte: #556070;
    --texto: #eef0f3;
    --texto-2: #9fa8b6;
    --aco: #a3abb8;
    --aco-escuro: #6c7585;
    --azul: #4f8ff2;
    --azul-fundo: #4f8ff222;
    --amarelo: #f5c432;
    --amarelo-texto: #f5c432;
    --amarelo-fundo: #f5c43222;
    --verde: #35bf6c;
    --verde-fundo: #35bf6c22;
    --vermelho: #f0564d;
    --vermelho-fundo: #f0564d22;
    --sombra-tela: 0 30px 60px -30px rgba(0, 0, 0, .8);
  }
  .demo img, .ilustracoes img { filter: brightness(.9); }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--piso); color: var(--texto); font: 16px/1.55 var(--corpo); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: .003em; margin: 0 0 .5rem; }
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; margin-top: 2.6rem; }
h3 { font-size: 1.4rem; margin-top: 1.6rem; }
p { margin: .5rem 0; }
a { color: var(--azul); text-underline-offset: .15em; }
img, video { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.lead { color: var(--texto-2); font-size: 1.1rem; max-width: 60ch; }
.nota { color: var(--texto-2); font-size: .92rem; max-width: 66ch; }
.ajuda { display: block; color: var(--texto-2); font-size: .88rem; font-weight: 400; margin: .1rem 0 .3rem; }
.rolagem { overflow-x: auto; }

/* ---- topo */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.25rem;
  background: color-mix(in srgb, var(--piso) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: .45rem; font: 700 1.3rem/1 var(--display); color: var(--texto); text-decoration: none; white-space: nowrap; }
.marca svg { width: 1.6rem; height: 1.6rem; color: var(--azul); }
.topo nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.topo nav a { color: var(--texto-2); text-decoration: none; padding: .45rem .7rem; border-radius: 8px; font-weight: 500; }
.topo nav a:hover { color: var(--texto); background: var(--placa-2); }
.topo nav a.destaque { color: var(--azul); font-weight: 600; }

.avisos { max-width: 60rem; margin: 1rem auto 0; padding: 0 1.25rem; }
.avisos p { background: var(--verde-fundo); border-left: 4px solid var(--verde); padding: .6rem .9rem; border-radius: 0 8px 8px 0; margin: 0 0 .5rem; }

main { margin: 0 auto; padding: 1.6rem 1.25rem 5rem; }
main.pagina, main.painel { max-width: 60rem; }
main.estreita, main.painel.estreita { max-width: 34rem; }
main.inicio { max-width: 68rem; padding-top: 0; }
main.catalogo { max-width: 56rem; }

/* ---- início: herói com a tela e as lojas */
.heroi { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 3.5rem 0 2rem; }
.heroi h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.005em; max-width: 15ch; margin-bottom: 1.1rem; }
.heroi .lead { font-size: 1.2rem; max-width: 50ch; margin-bottom: 1.6rem; }
.heroi .nota { margin-top: 1rem; }
.lojas { display: flex; gap: .7rem; flex-wrap: wrap; }
.loja {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.1rem .55rem .9rem; border-radius: 12px;
  background: var(--texto); color: var(--piso); text-decoration: none;
  font: 600 1.2rem/1.05 var(--display); letter-spacing: .01em;
}
.loja small { display: block; font: 500 .72rem/1.1 var(--corpo); opacity: .8; margin-bottom: .1rem; }
.loja svg { width: 1.6rem; height: 1.6rem; fill: currentColor; flex: none; }
.loja:hover { background: var(--azul); color: #fff; }
.loja.breve { background: transparent; color: var(--texto-2); border: 1.5px dashed var(--linha-forte); cursor: default; }
.loja.breve:hover { background: transparent; color: var(--texto-2); }
.telefone { margin: 0; justify-self: center; }
.telefone img { display: block; width: 100%; max-width: 300px; border-radius: 28px; border: 1px solid var(--linha); box-shadow: var(--sombra-tela); background: var(--placa); }
.heroi-tela img { max-width: 290px; }

/* ---- a barra do dia */
.dia { padding: 2rem 0 3rem; border-top: 1px solid var(--linha); }
.barra-dia { display: block; width: 100%; height: auto; max-width: 56rem; margin: 0 auto 1.4rem; }
.barra-dia .haste { stroke: var(--aco-escuro); stroke-width: 9; stroke-linecap: round; }
.barra-dia .haste-ponta { fill: var(--aco-escuro); }
.barra-dia .anilha.forca { fill: var(--azul); }
.barra-dia .anilha.mob { fill: var(--amarelo); }
.barra-dia .letra { font: 700 28px var(--display); fill: #fff; text-anchor: middle; }
.barra-dia .anilha.mob + .letra { fill: #2b2100; }
.barra-dia .hora { font: 600 22px var(--display); fill: var(--texto-2); text-anchor: middle; }
.agenda { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; display: grid; gap: .25rem; }
.agenda li { display: grid; grid-template-columns: 4.2rem 2rem 1fr auto; align-items: center; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--linha); }
.agenda-hora { font: 600 1.35rem/1 var(--display); font-variant-numeric: tabular-nums; }
.agenda-letra { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 6px; font: 700 1rem/1 var(--display); background: var(--azul); color: #fff; }
.agenda-letra.mob { background: var(--amarelo); color: #2b2100; }
.agenda-nome { font-weight: 500; }
.agenda-min { color: var(--texto-2); font-size: .92rem; }
.dia .nota { text-align: center; margin: 1rem auto 0; }

/* ---- passos com as telas */
.passos { padding: 2.5rem 0 1rem; border-top: 1px solid var(--linha); }
.passos h2 { margin-top: 0; }
.passo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 1.5rem 0; }
.passo:nth-child(odd) .telefone { order: -1; }
.passo h3 { font-size: 1.8rem; margin-top: 0; }
.passo p { max-width: 50ch; }
.passo .telefone img { max-width: 260px; }

/* ---- ciência, faixa de ilustrações e chamada final */
.ciencia-resumo, .faixa, .chamada { padding: 2.5rem 0; border-top: 1px solid var(--linha); }
.ciencia-resumo h2, .faixa h2, .chamada h2 { margin-top: 0; }
.achados { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; }
.achados li { border-top: 3px solid var(--azul); padding-top: .6rem; }
.achados b { display: block; font: 600 1.3rem/1.15 var(--display); margin-bottom: .3rem; }
.ilustracoes { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem 1rem; }
.ilustracoes a { display: block; color: inherit; text-decoration: none; }
.ilustracoes img { display: block; width: 100%; border-radius: 10px; background: var(--placa); border: 1px solid var(--linha); }
.ilustracoes span { display: block; margin-top: .35rem; font: 600 1.05rem/1.2 var(--display); }
.ilustracoes a:hover span { color: var(--azul); }
.botao { display: inline-block; padding: .65rem 1.2rem; border-radius: 10px; background: var(--azul); color: #fff; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; }
.botao:hover { filter: brightness(1.08); }
.chamada { text-align: left; }
.chamada .lojas { margin-top: 1rem; }

/* ---- artigos */
.artigo h1 { max-width: 20ch; }
.artigo p, .artigo li { max-width: 68ch; }
.artigo ul, .artigo ol { padding-left: 1.3rem; }
.regras li { margin: .6rem 0; }
.regras li b { font-weight: 650; }
table { border-collapse: collapse; width: 100%; margin: .8rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font: 600 .95rem var(--display); letter-spacing: .02em; color: var(--texto-2); }
.vagas td:first-child { white-space: nowrap; font-weight: 500; }
.dose { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; margin: 1.2rem 0; padding: .9rem 1rem; background: var(--placa); border: 1px solid var(--linha); border-radius: 10px; font-size: .92rem; }
.dose b { display: block; font: 600 1.05rem var(--display); }
aside { border-left: 4px solid var(--amarelo); background: var(--amarelo-fundo); padding: .7rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; }
aside p { margin: .2rem 0; max-width: none; }
.achados-lista { list-style: none; padding: 0; counter-reset: achado; }
.achados-lista > li { counter-increment: achado; padding: 1.4rem 0 1.2rem 3.4rem; position: relative; border-top: 1px solid var(--linha); }
.achados-lista > li::before { content: counter(achado, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem; font: 700 1.9rem/1 var(--display); color: var(--azul); }
.achados-lista h2 { font-size: 1.6rem; margin: 0 0 .1rem; }
.modalidade { color: var(--texto-2); font-size: .9rem; margin: 0 0 .5rem; }
.frase { font-size: 1.12rem; font-weight: 500; }
.fonte { font-size: .9rem; color: var(--texto-2); }
.fontes li { margin: .6rem 0; font-size: .95rem; }

/* ---- catálogo */
.indice { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.indice a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem .35rem .4rem; border-radius: 999px; border: 1px solid var(--linha); color: var(--texto); text-decoration: none; background: var(--placa); font-weight: 500; }
.grupo-snack h2 { display: flex; align-items: center; gap: .6rem; }
.grupo-snack h2 .agenda-letra { width: 2.1rem; height: 2.1rem; font-size: 1.3rem; border-radius: 8px; }
details.vaga { background: var(--placa); border: 1px solid var(--linha); border-radius: 12px; margin: .7rem 0; }
details.vaga summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .8rem 1rem; cursor: pointer; list-style: none; }
details.vaga summary::-webkit-details-marker { display: none; }
details.vaga summary::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(-45deg); margin-right: .2rem; transition: transform .15s; }
details.vaga[open] summary::before { transform: rotate(45deg); }
details.vaga summary small { flex-basis: 100%; color: var(--texto-2); font-size: .9rem; }
.contagem { font-weight: 600; }
.chip { display: inline-block; padding: .08rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.chip.forca { background: var(--azul-fundo); color: var(--azul); }
.chip.mob { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.vaga-lista { padding: 0 1rem 1rem; }
.ex { padding: 1.1rem 0; border-top: 1px solid var(--linha); }
.ex h3 { margin: 0 0 .2rem; font-size: 1.35rem; }
.ex h3 a { color: inherit; text-decoration: none; }
.ex h3 a:hover { color: var(--azul); }
.ex .d, .sozinho h1 .d { font-weight: 500; color: var(--texto-2); font-size: .95rem; }
.sozinho h1 .d { font-size: 1.2rem; display: block; margin-top: .2rem; }
.ex p { max-width: 68ch; }
.ex p b { font-weight: 650; }
.equipamento { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .6rem; }
.eq { display: inline-block; padding: .1rem .55rem; border-radius: 6px; background: var(--placa-2); border: 1px solid var(--linha); font-size: .82rem; }
.eq.opcional { border-style: dashed; color: var(--texto-2); }
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: .5rem 0 .7rem; max-width: 640px; }
.demo img { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--linha); }
.demo.one { grid-template-columns: 1fr; }
.demo-video { display: block; width: 100%; max-width: 640px; border-radius: 10px; background: #000; margin: .5rem 0 .7rem; }
.trilha { color: var(--texto-2); font-size: .9rem; margin: 0 0 .8rem; }
.sozinho { border-top: 0; max-width: 44rem; }

/* ---- formulários e painel */
.formulario { display: grid; gap: 1rem; margin: 1.2rem 0; }
.formulario label { display: grid; gap: .3rem; font-weight: 500; }
.formulario label.linha { grid-template-columns: auto 1fr; align-items: center; gap: .5rem; font-weight: 400; }
.formulario input[type="text"], .formulario input[type="url"], .formulario input[type="password"], .formulario textarea, .formulario input[type="file"], #filtro {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--placa); color: var(--texto); font: inherit;
}
.formulario textarea { line-height: 1.5; resize: vertical; }
.formulario fieldset { border: 1px solid var(--linha); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin: 0; display: grid; gap: .8rem; }
.formulario legend { font: 600 1.2rem var(--display); padding: 0 .3rem; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.slot { display: grid; gap: .5rem; align-content: start; }
.slot img { border-radius: 8px; border: 1px solid var(--linha); background: var(--placa); }
.acoes { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.painel-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.painel-nav { display: flex; gap: 1rem; align-items: center; }
.painel-nav form { margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--azul); text-decoration: underline; cursor: pointer; }
#filtro { max-width: 30rem; margin: .5rem 0 1rem; }
.lista td small { color: var(--texto-2); }
.falta { color: var(--texto-2); }

/* ---- rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 2rem 1.25rem 3rem; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; max-width: 68rem; margin: 0 auto; color: var(--texto-2); font-size: .92rem; }
.marca-rodape { font: 700 1.2rem var(--display); color: var(--texto); margin: 0 0 .2rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-content: start; }
.rodape a { color: var(--texto-2); }

/* ---- telas estreitas */
@media (max-width: 52rem) {
  .heroi { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .heroi-tela { order: 2; }
  .heroi-tela img { max-width: 260px; }
  .passo { grid-template-columns: 1fr; gap: 1rem; }
  .passo:nth-child(odd) .telefone { order: 0; }
  .passo .telefone { justify-self: start; }
  .passo .telefone img { max-width: 220px; }
  .duas { grid-template-columns: 1fr; }
  .ilustracoes { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2.3rem; }
  .agenda li { grid-template-columns: 3.6rem 1.8rem 1fr auto; gap: .5rem; }
  .barra-dia .hora { font-size: 30px; }
  .barra-dia .letra { font-size: 32px; }
}