/* BASE — html/body, shell .app, tipografia, brand-bar, footer */

html, body {
  font-family: var(--font-sans);
  background: var(--surface-bg);
  color: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;                 /* a marca d'água sai pela direita de propósito */
  background: linear-gradient(160deg,
    var(--favo-ink-900) 0%,           /* topo mais ESCURO que o card                  */
    var(--surface-0) 55%,
    var(--favo-black) 100%);
}
/* Marca d'água do favo (símbolo) - fixa, sutil, sem repetição/textura.
   Máscara na borda esquerda para não cortar seco. */
body::before {
  content: "";
  position: fixed;
  right: -120px; top: 50%;
  width: 460px; height: 460px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201080%201080%22%3E%3Cpath%20fill%3D%22%23f3df47%22%20d%3D%22M467.78%2C74.41l180.64%2C447.52c7.14%2C17.67%2C7.14%2C37.44%2C0%2C55.11l-180.64%2C447.52c-7.5%2C18.56-25.5%2C30.72-45.52%2C30.72h-145.72c-20.01%2C0-38.02-12.16-45.52-30.72L50.38%2C577.04c-7.14-17.67-7.14-37.44%2C0-55.11L231.02%2C74.41c7.47-18.56%2C25.5-30.72%2C45.52-30.72h145.72c20.01%2C0%2C38.02%2C12.16%2C45.52%2C30.72Z%22/%3E%3Cpath%20fill%3D%22%23ebae34%22%20d%3D%22M775.27%2C43.68h-187.78l197.04%2C477.71c7.41%2C17.98%2C7.41%2C38.18%2C0%2C56.16l-197.04%2C477.71h187.78c20.01%2C0%2C38.02-12.16%2C45.52-30.72l184.35-456.72c4.75-11.78%2C4.75-24.97%2C0-36.75l-184.35-456.67c-7.5-18.56-25.5-30.72-45.52-30.72Z%22/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}
/* Grão a 3,5% — textura, não glassmorphism. Mata o banding do gradiente
   em 8 bits (visível sobretudo na faixa mais escura do topo). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.app {
  position: relative;
  z-index: 1;
  max-width: var(--app-width);
  margin: 0 auto;
  /* o padding-bottom era 2.25rem para não encostar no rodapé-faixa; o
     rodapé virou gatilho de canto fixo e essa reserva não é mais devida */
  padding: 1rem 1.15rem 1.25rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Títulos (Heavy 900) */
h1,h2,h3,h4 { color: var(--text-strong); font-family: var(--font-display); font-weight: var(--weight-heavy); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
/* Palavra-destaque em Mel dentro de um título */
.am { color: var(--accent); }

/* ===== EYEBROW / OVERLINE ========================================== */
.overline {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent);              /* Mel sobre escuro (padrão da capa do brand book) */
}

/* ===== BRAND BAR =================================================== */
.brand-bar { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:0.25rem 0 1rem; }
.brand-lockup { display:flex; align-items:center; gap:10px; }
.brand-mark { width:26px; height:26px; display:block; flex:0 0 auto; }
.brand-word { display:flex; flex-direction:column; line-height:0.9; color:#fff; font-family:var(--font-display); }
.brand-word .grupo { font-weight:var(--weight-regular); font-size:9.5px; letter-spacing:0.18em; padding-left:0.18em; color:var(--text-muted); }
.brand-word .favo { font-weight:var(--weight-heavy); font-size:17px; letter-spacing:-0.01em; }
.brand-tagline { font-family:var(--font-display); font-size:10.5px; color:var(--accent); letter-spacing:var(--tracking-overline); text-transform:uppercase; font-weight:var(--weight-bold); }

/* ===== ÍCONES (Phosphor Fill via CDN; sem emoji) ================== */
/* uso: <i class="ph-fill ph-lock"></i> - cor via currentColor/token */
.ico { font-size:20px; line-height:1; display:inline-flex; }
.ico-sm { font-size:16px; } .ico-lg { font-size:26px; }

/* ===== FOOTER ===================================================== */
/* (2026-07-20) O rodapé era uma faixa: régua de 1px na largura toda +
   bloco centrado, ocupando ~3rem de ALTURA para carregar três pontinhos
   que só servem de porta de serviço do apresentador. A régua saiu e o
   gatilho foi para o canto inferior direito, fora do fluxo — o conteúdo
   das telas ganhou essa altura de volta, que é o que decide se o desktop
   rola ou não. `position: fixed` e não `absolute`: o `.app` cresce com o
   conteúdo e o gatilho tem que ficar no canto da JANELA. */
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
  line-height: 1;
}
/* área de toque de 44px sem ocupar 44px de layout: o padding do <span> é
   o alvo, e o rodapé inteiro é do tamanho dele */
.footer .admin-hint {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  opacity: 0.35;
  padding: 10px 8px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .footer .admin-hint:hover { opacity: 0.7; }
}

/* util */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Anel de foco único, de dois tons (halo navy + traço Mel). Substitui a
   lista seletor-por-seletor que existia em components/button.css (que
   cobria só botões e deixava outros focáveis sem anel visível). */
:focus-visible {
  outline: 2px solid transparent;   /* preserva o anel no modo alto contraste */
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-control);
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}

/* `prefers-reduced-motion` tem que zerar DELAY também, não só duração — do
   contrário a tela de resultado, cujas 10 entradas têm animation-delay
   escalonado, fica em branco por ~1,1s antes de pipocar tudo de uma vez. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   .app — container central responsivo
   Substitui o max-width:480px fixo via media queries aditivas (min-width).
   O base não é alterado; as queries sobreescrevem progressive enhancement.
   ========================================================================= */

/* sm+ — soltar o max-width fixo e ativar o container responsivo */
@media (min-width: 600px) {
  .app {
    width: 100%;
    max-width: var(--maxw-shell);
    margin-inline: auto;
    padding-inline: var(--pad-inline);
  }
}

/* md+ — incremento de padding vertical para aproveitar tela maior */
@media (min-width: 900px) {
  .app {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* lg+ — espaçamento vertical mais generoso no desktop */
@media (min-width: 1280px) {
  .app {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

/* xl — telão: padding vertical ampliado */

/* xxl — 4K */

/* =========================================================================
   BRAND BAR — acompanha centralizado; cresce no telão
   ========================================================================= */

/* md+ — marca um pouco maior para tablets */
@media (min-width: 900px) {
  .brand-bar {
    padding-bottom: 1.25rem;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
  }

  .brand-word .grupo {
    font-size: 10px;
  }

  .brand-word .favo {
    font-size: 19px;
  }

  .brand-tagline {
    font-size: 11.5px;
  }
}

/* lg+ — desktop: brand-bar horizontal para economizar altura */
@media (min-width: 1280px) {
  .brand-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    gap: 1rem;
  }

  .brand-lockup {
    gap: 10px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .brand-word .grupo {
    font-size: 10.5px;
  }

  .brand-word .favo {
    font-size: 21px;
  }

  .brand-tagline {
    font-size: 12px;
  }
}

/* xl — telão: marca bem legível à distância */

/* xxl — 4K: escala adicional */

/* =========================================================================
   FOOTER — acompanha o shell; tamanho adequado no telão
   ========================================================================= */

/* O rodapé é um gatilho de canto: NÃO cresce com a tela (crescer só o
   tornaria mais visível sem servir a ninguém). Mantido o mesmo corpo em
   todos os breakpoints; só o afastamento do canto respira um pouco. */
@media (min-width: 1280px) {
  .footer {
    padding: 0.75rem 1rem;
  }
}


/* Recuperado de _responsive/00-foundation.css — shell, brand-bar e footer (xl/xxl) */
@media (min-width: 1680px) {
  .app {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media (min-width: 2560px) {
  .app {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 1680px) {
  .brand-bar {
    padding-bottom: 1.75rem;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .brand-word .grupo {
    font-size: 11px;
  }

  .brand-word .favo {
    font-size: 23px;
  }

  .brand-tagline {
    font-size: 13.5px;
    letter-spacing: 0.2em;
  }
}
@media (min-width: 2560px) {
  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-word .grupo {
    font-size: 12px;
  }

  .brand-word .favo {
    font-size: 26px;
  }

  .brand-tagline {
    font-size: 16px;
  }
}