/* ==========================================================================
   futuro.css — camada ADITIVA da página inicial da AFRITRONIC
   --------------------------------------------------------------------------
   Carregada DEPOIS de css/style.css (media="print" onload="this.media='all'").
   Reverter tudo = tirar um <link>. Nada aqui depende de CDN, de fontes novas
   ou de JS. Todos os valores saem dos tokens já definidos em style.css:25-59
   (--bg --primary --primary-light --accent --accent-2 --success --text
   --text-muted --bg-card --border-* --radius* --shadow* --transition*).
   As poucas variáveis --fut-* abaixo são derivadas desses tokens, não uma
   paleta nova.
   Índice:
     1. Tokens derivados
     2. Hero futurista (grelha, glow, vidro)
     3. Secção "Disponível agora" (cabeçalho + estado)
     4. Filtro por categoria (pills)
     5. Grelha de produtos
     6. Bloco comparativo 382 / 5 386
     7. Sem JavaScript / falha de carregamento
     8. Acessibilidade (focus, reduced-motion, contraste)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  --fut-glass:      rgba(0, 20, 60, 0.72);   /* = --bg-card, sem blur */
  --fut-glass-deep: rgba(0, 8, 32, 0.86);
  --fut-line:       rgba(0, 64, 224, 0.10);  /* = --border-subtle a 50% */
  --fut-live:       #34D399;                 /* = --success-light */
  --fut-live-bd:    rgba(52, 211, 153, 0.30);
  --fut-live-bg:    rgba(5, 150, 105, 0.12); /* = --success a 12% */
  --fut-gap:        0.75rem;
}

/* ================================================================= 2. HERO */
/* Linhas de grelha por cima do gradiente, por baixo do conteúdo. */
.fut-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--fut-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fut-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
}
@media (min-width: 768px) { .fut-hero-lines { background-size: 88px 88px; } }

.hero { padding-bottom: 4rem; }
@media (min-width: 1024px) { .hero { padding-bottom: 6rem; } }

/* Badge do hero: vidro discreto em vez de pílula chapada.
   flex-wrap + max-width: o texto é longo e a 360px tem de poder quebrar
   (um inline-flex sem quebra força a grelha do hero a transbordar). */
.hero-badge {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background: rgba(0, 64, 224, 0.14);
  border-color: var(--border-medium);
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 100%;
  flex-wrap: wrap;
  line-height: 1.4;
  text-align: left;
}
.hero-badge strong { color: var(--fut-live); font-weight: 800; }

/* Busca: alvo de toque ≥44px e foco visível. */
.hero-search { width: 100%; max-width: 520px; }
.hero-search input {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  background: var(--fut-glass);
  color: var(--text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.hero-search input::placeholder { color: var(--text-muted); }
.hero-search input:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(26, 95, 255, 0.22);
}
.hero-search .btn-primary { min-height: 46px; padding-inline: 1.5rem; flex: 0 0 auto; }

/* Cartão do hero: passa a vidro escuro (a identidade da página é escura). */
.hero-card {
  background: linear-gradient(160deg, var(--fut-glass), var(--fut-glass-deep));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-glow-lg);
  color: var(--text);
  padding: 1.5rem;
}
@media (min-width: 640px) { .hero-card { padding: 1.75rem; } }
.hero-card::before {
  background: linear-gradient(90deg, var(--primary), var(--accent-2), var(--success-light));
}
.hero-card h2 { color: var(--text-bright); font-size: 1.375rem; }
.hero-card p { color: var(--text-muted); }
.hero-card-label {
  color: var(--primary-light);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.hero-card-pill {
  background: rgba(0, 64, 224, 0.14);
  border-color: var(--border-subtle);
  color: var(--text);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.hero-card-pill:hover { border-color: var(--primary-light); color: var(--text-bright); }
.hero-card-footer { color: var(--text-muted); font-size: 0.75rem; margin-top: 0.875rem; margin-bottom: 0; }

/* Linha "aovivo" dentro do cartão do hero. */
.fut-live-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: var(--fut-live-bg);
  border: 1px solid var(--fut-live-bd);
  color: var(--fut-live);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}
.fut-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fut-live);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: futPulse 2.4s ease-out infinite;
}
@keyframes futPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ============================================ 3. SECÇÃO "DISPONÍVEL AGORA" */
.fut-sec { scroll-margin-top: 5rem; }
.fut-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 15% 0%, rgba(0, 64, 224, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 15%, rgba(124, 58, 237, 0.07) 0%, transparent 60%);
}
.fut-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 0.75rem;
}
.fut-sec-head { text-align: center; margin-bottom: 1.75rem; }
.fut-sec-head .section-subtitle { margin: 0.75rem auto 0; max-width: 46rem; }

/* Links estáticos: existem no HTML puro, antes de qualquer JS. */
.fut-static-links {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.9;
}
.fut-static-links a {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fut-static-links a:hover { color: var(--text-bright); }
.fut-static-links .fut-sep { padding: 0 0.5rem; color: var(--border-medium); }

/* Barra de filtros: fica colada abaixo da navbar ao rolar.
   --nav-height (68px) é a altura da navbar em modo .scrolled. */
.fut-filters {
  position: sticky;
  top: var(--nav-height);
  z-index: 20;
  margin-bottom: 1rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, rgba(0, 0, 21, 0.94) 60%, rgba(0, 0, 21, 0));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.fut-status {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0.5rem;
}
.fut-status b { color: var(--text); font-weight: 700; }

/* ================================================ 4. FILTRO (PILLS) */
.fut-pills {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.fut-pills::-webkit-scrollbar { display: none; }

.fut-pill {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--fut-glass);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.fut-pill:hover { color: var(--text-bright); border-color: var(--border-medium); }
.fut-pill[aria-pressed="true"] {
  color: #fff;
  border-color: var(--primary-light);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 4px 18px rgba(0, 64, 224, 0.35);
}
.fut-pill-n {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-full);
  background: rgba(224, 224, 224, 0.08);
  color: var(--text-muted);
}
.fut-pill[aria-pressed="true"] .fut-pill-n { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ================================================ 5. GRELHA DE PRODUTOS */
.fut-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--fut-gap);
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .fut-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
  .fut-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; }
}

.fut-item { display: flex; }

.fut-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(165deg, rgba(0, 30, 84, 0.66), rgba(0, 10, 38, 0.9));
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.fut-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}
.fut-card:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

/* Media quadrada: a caixa reserva sempre o mesmo espaço (sem saltos de layout). */
.fut-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.625rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 64, 224, 0.16) 0%, transparent 70%),
    rgba(0, 0, 21, 0.5);
  border-bottom: 1px solid var(--border-subtle);
}
.fut-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Placeholder para o item sem foto (1 dos 382): inicial em vez de imagem. */
.fut-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 800;
  color: var(--border-medium);
  text-transform: uppercase;
}

.fut-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: 0.75rem;
}
.fut-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.fut-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  margin-top: auto;
}
/* O preço é o protagonista do cartão. */
.fut-price {
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fut-live);
  letter-spacing: -0.01em;
}
.fut-cur {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.1875rem;
}
.fut-badge {
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--radius-full);
  background: var(--fut-live-bg);
  border: 1px solid var(--fut-live-bd);
  color: var(--fut-live);
}
.fut-cat {
  font-size: 0.6875rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botão "ver mais" */
.fut-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.fut-more { min-height: 48px; }
.fut-more[hidden] { display: none; }
.fut-more .fut-more-n { font-weight: 400; opacity: 0.85; }

/* =========================================== 6. BLOCO COMPARATIVO */
.fut-compare { display: grid; gap: 1rem; }
@media (min-width: 768px) { .fut-compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.fut-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(165deg, rgba(0, 20, 60, 0.6), rgba(0, 8, 32, 0.85));
}
@media (min-width: 640px) { .fut-panel { padding: 2rem; } }

.fut-panel--live {
  border-color: var(--fut-live-bd);
  background: linear-gradient(165deg, rgba(5, 150, 105, 0.12), rgba(0, 8, 32, 0.9));
  box-shadow: var(--shadow-glow);
}
.fut-panel--live .fut-panel-num { color: var(--fut-live); }

.fut-panel-kicker {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--text-muted);
}
.fut-panel-num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-bright);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fut-panel h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-bright);
}
.fut-panel p { font-size: 0.875rem; color: var(--text-muted); }
.fut-panel .btn-primary,
.fut-panel .btn-ghost { margin-top: 1rem; min-height: 48px; text-align: center; }

/* ================================= 7. SEM JS / FALHA DE CARREGAMENTO */
.fut-noscript,
.fut-empty {
  display: block;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-medium);
  background: var(--fut-glass);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}
.fut-noscript { border-style: dashed; }
.fut-noscript strong,
.fut-empty strong { color: var(--text-bright); display: block; margin-bottom: 0.5rem; font-size: 1rem; }
.fut-noscript a,
.fut-empty a { color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; }
.fut-empty { margin-bottom: 1rem; }
.fut-empty[hidden] { display: none; }

/* ============================================ 8. ACESSIBILIDADE */
/* Foco sempre visível nos controlos desta camada. */
.fut-pill:focus-visible,
.fut-more:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

/* Contraste: sobre os painéis de vidro o texto muted fica mais claro. */
.fut-panel p,
.fut-static-links,
.fut-status { color: #9AAACB; }

@media (prefers-reduced-motion: reduce) {
  .fut-card,
  .fut-pill,
  .fut-more,
  .hero-search input {
    transition: none;
  }
  .fut-card:hover { transform: none; }
  .fut-dot { animation: none; box-shadow: none; }
  .fut-filters { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 21, 0.96); }
  .animate-fade-up,
  .fade-up,
  .hero-badge,
  .css-atom,
  .css-atom *,
  .atom-ring,
  .atom-dot { animation: none !important; }
  .animate-fade-up { opacity: 1; transform: none; }
  .scroll-indicator { animation: none; }
}

/* 360px: nada pode transbordar na horizontal. */
@media (max-width: 400px) {
  .fut-sec-head { margin-bottom: 1.25rem; }
  .fut-panel { padding: 1.25rem; }
  .fut-panel-num { font-size: 2rem; }
  .fut-body { padding: 0.625rem; }
  .fut-price { font-size: 1.0625rem; }
}