/* ===========================================================================
   For Boomers — folha de estilo do blog

   Deliberadamente INDEPENDENTE do brand.css do forboomers.com.br. Os dois
   sites usam a mesma identidade, mas nao compartilham arquivo: dois sites que
   vao evoluir separados, acoplados por um CSS comum, viram uma mudanca que
   quebra os dois. Duplicar um arquivo e' mais barato que esse acoplamento.

   Todas as cores abaixo sao os valores MEDIDOS da secao 2 do DESIGN.md do site
   principal -- os substitutos que passaram no contraste, nao os originais da
   marca, dos quais 11 de 17 pares reprovaram. Nao trocar por "a cor da marca"
   sem medir de novo.
   =========================================================================== */

:root {
  /* Texto -------------------------------------------------------------- */
  --ink-900:      #0f172a;   /* corpo e titulos      17.85:1 sobre branco */
  --ink-700:      #334155;   /* secundario           10.35:1 */
  --ink-500:      #4d596b;   /* apagado               7.10:1  (o #64748b original reprovou) */

  /* Marca -------------------------------------------------------------- */
  --navy-900:     #061f55;   /* painel escuro, rodape */
  --navy-800:     #082d73;   /* botao primario, foco   branco sobre ele = 12.86:1 */
  --link:         #1055b4;   /*                        7.05:1  (o #1670ee original reprovou) */
  --cyan-400:     #39d9f2;   /* detalhe SO sobre navy  8.54:1 */

  /* Superficies -------------------------------------------------------- */
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --line:         #8e949c;   /* borda de separacao     3.06:1 */
  --line-strong:  #8b96a4;   /* borda de campo         3.00:1 */

  /* Sinal -------------------------------------------------------------- */
  --sucesso:      #0d6642;
  --erro:         #ad1e1e;

  /* Tipografia --------------------------------------------------------- */
  --fonte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Medida: 66 caracteres e' o alvo de leitura confortavel para texto
     corrido. Acima disso o olho perde a linha ao voltar. */
  --medida: 34rem;
  --largura: 72rem;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-900);
  font-family: var(--fonte);
  /* Piso de 17px do DESIGN.md secao 9. Nao existe tier de legenda neste
     site: se um texto nao merece 17px, ele nao merece estar na pagina. */
  font-size: 20px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;   /* nunca negativo */
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Foco visivel em TUDO. Nunca removido -- e' a unica forma de quem navega
   por teclado saber onde esta. */
:focus-visible {
  outline: 3px solid var(--navy-800);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Pula para o conteudo: primeiro elemento focavel da pagina. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--navy-800);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

/* ---------------------------------------------------------------------- */
/* Estrutura                                                               */
/* ---------------------------------------------------------------------- */
.envoltorio {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

.medida { max-width: var(--medida); }

/* ---------------------------------------------------------------------- */
/* Cabecalho                                                               */
/* ---------------------------------------------------------------------- */
.topo {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.topo__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 80px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 21px;
  color: var(--ink-900);
  text-decoration: none;
}
.topo__marca img { width: 40px; height: 40px; flex: none; }

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Alvo de toque de 44px, exigencia do contrato -- por isso a altura minima
   vem antes de qualquer preocupacao com o desenho. */
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  color: var(--ink-700);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.menu a:hover { background: var(--surface-2); color: var(--ink-900); }
.menu a[aria-current="page"] { color: var(--navy-800); background: #eef3fb; }

/* ---------------------------------------------------------------------- */
/* Titulos                                                                 */
/* ---------------------------------------------------------------------- */
h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink-900);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.5vw, 54px); font-weight: 700; margin: 0 0 16px; }
h2 { font-size: clamp(25px, 3.2vw, 32px); font-weight: 700; margin: 48px 0 12px; }
h3 { font-size: clamp(21px, 2.4vw, 25px); font-weight: 700; margin: 32px 0 8px; }

.chamada {
  font-size: clamp(21px, 2.4vw, 25px);
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 28px;
}

/* ---------------------------------------------------------------------- */
/* Botoes                                                                  */
/* ---------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;          /* DESIGN.md secao "Botao primario" */
  padding: 0 28px;
  border: 2px solid var(--navy-800);
  border-radius: 10px;
  background: var(--navy-800);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.botao:hover { background: #0a3690; border-color: #0a3690; }

.botao--vazado { background: var(--surface); color: var(--navy-800); }
.botao--vazado:hover { background: #eef3fb; }

/* ---------------------------------------------------------------------- */
/* Painel escuro de acento                                                 */
/* ---------------------------------------------------------------------- */
.painel {
  background: var(--navy-900);
  color: #eaf1fb;
}
.painel h2, .painel h3 { color: #fff; }
.painel a { color: var(--cyan-400); }   /* so aqui: ciano exige fundo navy */

/* ---------------------------------------------------------------------- */
/* Lista de artigos                                                        */
/* ---------------------------------------------------------------------- */
.artigos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.artigos li { border-bottom: 1px solid var(--line); }
.artigos li:first-child { border-top: 1px solid var(--line); }

.artigo-item {
  display: block;
  padding: 26px 0;
  text-decoration: none;
  color: inherit;
}
.artigo-item:hover .artigo-item__titulo { text-decoration: underline; text-decoration-thickness: 2px; }

.artigo-item__data {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.artigo-item__titulo {
  font-size: clamp(23px, 2.8vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.artigo-item__resumo { margin: 0; color: var(--ink-700); font-size: 19px; }

/* ---------------------------------------------------------------------- */
/* Corpo do artigo                                                         */
/* ---------------------------------------------------------------------- */
.prosa { max-width: var(--medida); }
.prosa p { margin: 0 0 24px; }
.prosa ul, .prosa ol { margin: 0 0 24px; padding-left: 26px; }
.prosa li { margin-bottom: 10px; }
.prosa blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--navy-800);
  color: var(--ink-700);
}
.prosa code {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.prosa pre {
  overflow-x: auto;          /* codigo largo rola dentro da caixa, nunca a pagina */
  padding: 20px;
  border-radius: 10px;
  background: var(--navy-900);
  color: #eaf1fb;
}
.prosa pre code { background: none; border: 0; padding: 0; color: inherit; }
.prosa hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

/* ---------------------------------------------------------------------- */
/* Formularios                                                             */
/* ---------------------------------------------------------------------- */
.campo { display: block; margin-bottom: 22px; max-width: 34rem; }

/* Rotulo SEMPRE acima e sempre visivel -- nunca placeholder no lugar de
   rotulo, nunca floating label (DESIGN.md). */
.campo__rotulo {
  display: block;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink-900);
}
.campo__ajuda { display: block; font-weight: 400; color: var(--ink-500); font-size: 18px; }

.campo input, .campo textarea, .campo select {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 20px;
  line-height: 1.55;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--navy-800); }

/* Erro abaixo do campo, com texto -- cor sozinha nunca carrega o significado. */
.campo__erro {
  display: block;
  margin-top: 8px;
  color: var(--erro);
  font-size: 18px;
  font-weight: 600;
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--erro);
}

.resposta {
  margin: 18px 0 0;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid var(--sucesso);
  background: #e8f2ec;
  color: var(--sucesso);
  font-weight: 600;
  max-width: 34rem;
}
.resposta:empty { display: none; }
.resposta[data-falhou] {
  border-color: var(--erro);
  background: #f7eaea;
  color: var(--erro);
}

/* ---------------------------------------------------------------------- */
/* Rodape                                                                  */
/* ---------------------------------------------------------------------- */
.rodape {
  margin-top: 96px;
  padding: 56px 0 48px;
  background: var(--navy-900);
  color: #cddcf2;
  font-size: 19px;
}
.rodape a { color: var(--cyan-400); }
.rodape h2 { font-size: 20px; margin: 0 0 12px; color: #fff; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 4px; }
.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.rodape__fim {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #24406f;
  color: #a9c0e0;
  font-size: 18px;
}

/* ---------------------------------------------------------------------- */
/* Movimento                                                               */
/* ---------------------------------------------------------------------- */
/* A pagina inteira funciona sem nenhuma animacao. O que existe aqui e'
   entrada suave, e ela some por completo sob movimento reduzido -- sem
   perder informacao, porque movimento nunca carrega significado sozinho. */
@media (prefers-reduced-motion: no-preference) {
  .surge { animation: surge 420ms cubic-bezier(.2, 0, 0, 1) both; }
  @keyframes surge {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  .topo, .rodape, .pular { display: none; }
  body { font-size: 12pt; }
}

/* ---------------------------------------------------------------------- */
/* Troca de idioma                                                         */
/* ---------------------------------------------------------------------- */
/* Os dois idiomas ficam SEMPRE visiveis, um marcado como atual. Um botao
   unico que so diz "EN" obriga a pessoa a adivinhar se aquilo e' o idioma em
   que ela esta ou o idioma para onde vai. */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.idioma__atual,
.idioma a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.idioma__atual { background: var(--navy-800); color: #fff; }

.idioma a { color: var(--ink-700); }
.idioma a:hover { background: var(--surface-2); color: var(--ink-900); }

/* ---------------------------------------------------------------------- */
/* Boominho vivo                                                           */
/* ---------------------------------------------------------------------- */
/* Portado do vida.css do forboomers.com.br, em HTML fixo. So transform e
   opacity se movem; sob movimento reduzido a cena fica parada e COMPLETA
   (os chips param nos angulos de partida, escolhidos para nao se
   sobrepor). A imagem do mascote nunca e' redesenhada. */
.boominho {
  --b-mw: clamp(140px, 20vw, 210px);             /* largura do mascote       */
  --b-palco: min(100%, calc(var(--b-mw) * 1.8)); /* caixa em que a orbita cabe */
  --b-chip: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: none;
  margin: 0 auto;
  max-width: 100%;
}
.boominho--contato { --b-mw: clamp(120px, 16vw, 170px); --b-palco: calc(var(--b-mw) + 24px); }

/* Balao: borda 3:1 carrega a separacao; a sombra e' reforco. */
.boominho__balao {
  position: relative;
  width: clamp(200px, 60vw, 280px);
  margin: 0;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--ink-900);
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(11, 18, 32, .14), 0 2px 6px rgba(11, 18, 32, .08);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  transform-origin: 50% 100%;
}
.boominho__balao::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 50%; bottom: -9px;
  margin-left: -8px;
  background: var(--surface);
  border-right: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  border-radius: 0 0 4px 0;
  transform: rotate(45deg);
}

.boominho__palco {
  position: relative;
  width: var(--b-palco);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chao: o mascote deixa de flutuar no vazio. */
.boominho__chao {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--b-mw) * 0.5 - 10px);
  width: calc(var(--b-mw) * 0.72);
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(40, 64, 110, .20) 0%, rgba(40, 64, 110, .10) 45%, rgba(40, 64, 110, 0) 72%);
  pointer-events: none;
}

.boominho__toque {
  position: relative;
  z-index: 1;                       /* por cima da orbita: chips passam atras */
  width: var(--b-mw);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 24px;
  cursor: pointer;
  touch-action: manipulation;
}
.boominho__toque img { display: block; width: 100%; height: auto; }
.boominho__toque:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 4px; }

/* Orbita: tres elipses (planos inclinados que se cruzam), quatro chips.
   Cada orbe e' uma caixa QUADRADA de lado --dy achatada por scaleX(--ex);
   girar a caixa desenha o circulo, o scaleX faz dele uma elipse. O chip
   desfaz o achatamento com --iex = 1/--ex para nao sair oval. */
.boominho__orbita {
  position: absolute;
  inset: calc(var(--b-chip) / 2);   /* o chip nunca sai da caixa do palco */
  pointer-events: none;
}
.boominho__anel[data-anel="a"], .boominho__orb[data-anel="a"] { --dx: 58%;  --dy: 78%;  --ex: .744; --iex: 1.345; }
.boominho__anel[data-anel="b"], .boominho__orb[data-anel="b"] { --dx: 86%;  --dy: 100%; --ex: .86;  --iex: 1.163; }
.boominho__anel[data-anel="c"], .boominho__orb[data-anel="c"] { --dx: 100%; --dy: 62%;  --ex: 1.613; --iex: .62; }

.boominho__anel {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--dx);
  height: var(--dy);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(40, 64, 110, .13);   /* guia decorativa, nada depende dela */
  border-radius: 50%;
}
.boominho__orb {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--dy);
  height: var(--dy);
  transform: translate(-50%, -50%) scaleX(var(--ex, 1));
}
.boominho__gira {
  position: absolute;
  inset: 0;
  transform: rotate(var(--ang, 0deg));        /* angulo de partida = estado parado */
}
.boominho__chip {
  position: absolute;
  left: 50%; top: 0;
  width: var(--b-chip);
  height: var(--b-chip);
  margin: calc(var(--b-chip) / -2) 0 0 calc(var(--b-chip) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid #7089b3;                  /* 3.55:1 sobre branco */
  box-shadow: 0 6px 14px -6px rgba(11, 18, 32, .34), 0 1px 2px rgba(11, 18, 32, .10);
  color: #28406e;                             /* traco do icone, 10.25:1 */
  transform: rotate(calc(var(--ang, 0deg) * -1)) scaleX(var(--iex, 1));
}
.boominho__chip svg { width: 56%; height: 56%; display: block; }

/* Som: opt-in, padrao mudo, controle visivel. */
.boominho__som {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid #28406e;
  color: #28406e;
  font: 600 17px/1.3 var(--fonte);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.boominho__som svg { flex: none; }
.boominho__som:hover { background: var(--surface-2); }
.boominho__som:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 3px; }
.boominho__som[aria-pressed="false"] .boominho__som-onda { display: none; }
.boominho__som[aria-pressed="true"]  .boominho__som-corte { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .boominho__gira { animation: boominho-horario var(--spin, 30s) linear infinite; }
  .boominho__chip { animation: boominho-chip-horario var(--spin, 30s) linear infinite; }
  .boominho__orb[data-sentido="anti"] .boominho__gira { animation-name: boominho-anti; }
  .boominho__orb[data-sentido="anti"] .boominho__chip { animation-name: boominho-chip-anti; }
  .boominho__toque img { animation: boominho-flutua 5s ease-in-out 1.8s infinite alternate; }
  .boominho__chao { animation: boominho-chao 5s ease-in-out 1.8s infinite alternate; }
  .boominho--fala .boominho__balao { animation: boominho-balao 260ms cubic-bezier(.2, 0, 0, 1) both; }
  .boominho__som:active { transform: translateY(1px); }
}
/* Os keyframes partem SEMPRE do angulo estatico: o estado parado e o
   primeiro quadro sao o mesmo -- nada salta ao ligar/desligar movimento. */
@keyframes boominho-horario {
  from { transform: rotate(var(--ang, 0deg)); }
  to   { transform: rotate(calc(var(--ang, 0deg) + 360deg)); }
}
@keyframes boominho-anti {
  from { transform: rotate(var(--ang, 0deg)); }
  to   { transform: rotate(calc(var(--ang, 0deg) - 360deg)); }
}
@keyframes boominho-chip-horario {
  from { transform: rotate(calc(var(--ang, 0deg) * -1)) scaleX(var(--iex, 1)); }
  to   { transform: rotate(calc(var(--ang, 0deg) * -1 - 360deg)) scaleX(var(--iex, 1)); }
}
@keyframes boominho-chip-anti {
  from { transform: rotate(calc(var(--ang, 0deg) * -1)) scaleX(var(--iex, 1)); }
  to   { transform: rotate(calc(var(--ang, 0deg) * -1 + 360deg)) scaleX(var(--iex, 1)); }
}
@keyframes boominho-flutua {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
@keyframes boominho-chao {
  from { transform: translateX(-50%) scaleX(1);   opacity: 1; }
  to   { transform: translateX(-50%) scaleX(.88); opacity: .62; }
}
@keyframes boominho-balao {
  from { opacity: .4; transform: translateY(6px) scale(.94); }
  to   { opacity: 1;  transform: none; }
}

/* Pagina de contato: formulario + Boominho ao lado (largo) ou numa faixa
   fixa no pe da tela (estreito), para a reacao aparecer onde se olha. */
.contato { display: grid; gap: 32px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) {
  .contato { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .contato__lado { position: sticky; top: 24px; }
}
@media (max-width: 899px) {
  .contato__lado {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(11, 18, 32, .08);
  }
  .contato__lado .boominho { flex-direction: row; gap: 12px; --b-mw: 64px; --b-palco: 64px; }
  .contato__lado .boominho__balao { flex: 1 1 auto; width: auto; order: 1; font-size: 17px; padding: 8px 12px; }
  .contato__lado .boominho__balao::after {
    left: -9px; bottom: auto; top: 50%; margin: -8px 0 0; transform: rotate(135deg);
  }
  .contato__lado .boominho__chao { display: none; }
  .contato__lado .boominho__toque { border-radius: 12px; }
  .contato__lado .boominho__som { order: 2; width: 48px; padding: 0; justify-content: center; }
  .contato__lado .boominho__som span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media print {
  .boominho__orbita, .boominho__chao, .boominho__som { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Materiais: janela, cronometro, pedido, placar, festa                    */
/* ---------------------------------------------------------------------- */
/* Estado da janela num lugar so: <html data-janela>. Sem JS, "aberta" e' o
   padrao -- e o baixar.php e' quem recusa de verdade depois da data. */
html:not([data-janela="encerrada"]) .so-encerrada { display: none !important; }
html[data-janela="encerrada"] .so-aberta { display: none !important; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-700);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 17px;
}
.selo--ok { background: #e6f0e8; border-color: #2f6b41; color: #23532f; } /* 7.9:1 */

.relogio { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.relogio__casa {
  min-width: 72px;                 /* 4 casas + 3 vaos cabem em 335px (375 - respiro) */
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}
.relogio__casa b {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.relogio__casa span { display: block; margin-top: 2px; font-family: var(--mono); font-size: 17px; color: var(--ink-500); }

/* O formulario de pedido e' um cartao branco dentro do painel navy. */
.pedido {
  background: var(--surface);
  color: var(--ink-900);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 30px);
}
.pedido .campo { max-width: none; }
.pedido a { color: var(--link); }
.pedido__edicao { border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; }
.pedido__edicao legend { font-weight: 600; font-size: 19px; padding: 0 6px; }
.pedido__edicao label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: 24px; font-size: 19px; }
.pedido__edicao input { width: 22px; height: 22px; accent-color: var(--navy-800); }

.placar__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 22px 0 0; }
.placar__total b { font-size: clamp(44px, 8vw, 72px); line-height: 1; color: var(--navy-800); }
.placar__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 48px);
  margin-top: clamp(30px, 4vw, 44px);
}
.placar__titulo { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--navy-800); margin: 0 0 14px; }
.placar__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.placar__rotulo { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; line-height: 1.5; }
.placar__n { font-variant-numeric: tabular-nums; font-weight: 600; }
.placar__trilho { height: 8px; margin-top: 7px; border-radius: 999px; background: #dbe4f3; overflow: hidden; }
.placar__barra { height: 100%; width: 0; border-radius: 999px; background: var(--navy-800); }

/* Confete: UMA queda continua de 2,2s e some -- nada pisca. So existe sob
   no-preference; o materiais.js nem cria as pecas sob movimento reduzido. */
.confete { position: absolute; top: -24px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .confete { animation: confete-cai 2.2s cubic-bezier(.25, .6, .4, 1) forwards; }
}
@keyframes confete-cai {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--desvio, 14px), 105vh, 0) rotate(560deg); }
}

/* ---------------------------------------------------------------------- */
/* Artigo: diagramacao                                                     */
/* ---------------------------------------------------------------------- */
.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ink-500);
  margin: 0 0 14px;
}
.artigo__cabeca h1 { text-wrap: balance; margin-bottom: 20px; }

/* A imagem de abertura e' mais larga que a coluna de texto, de proposito:
   e' o unico elemento da pagina que pode ocupar a largura toda. */
.artigo__figura { margin: clamp(28px, 4vw, 44px) 0 0; max-width: 60rem; }
.artigo__figura img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.artigo__figura figcaption { font-size: 17px; color: var(--ink-500); margin-top: 10px; max-width: var(--medida); }

.prosa { margin-top: clamp(32px, 5vw, 48px); text-wrap: pretty; }
/* Paragrafo de abertura um ponto maior: e' o que decide se a pessoa fica. */
.prosa > p:first-child { font-size: 21px; line-height: 1.6; }
/* Citacao = frase-chave em destaque, nao texto de terceiro. */
.prosa blockquote {
  margin: 44px 0;
  padding: 4px 0 4px 28px;
  border-left: 4px solid var(--navy-800);
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--navy-900);
}
.prosa blockquote p { margin: 0; }
.prosa blockquote p + p { margin-top: 14px; }

.artigo__fim { width: 56px; height: 4px; border-radius: 2px; background: var(--navy-800); margin: 48px 0 0; }
.artigo__autor {
  display: flex;
  gap: 18px;
  align-items: center;
  max-width: var(--medida);
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.artigo__autor img { width: 72px; height: 72px; flex: none; }
.artigo__autor p { margin: 0; font-size: 18px; color: var(--ink-700); }
.artigo__autor strong { display: block; color: var(--ink-900); font-size: 19px; }