/* ===========================
    SUMÁRIO DO ARQUIVO
    1.  (035) Reset
    2.  (043) Body
    3.  (057) Overlay de contraste global
    4.  (068) Hero (headline)
    5.  (110) Hero (logo)
    6.  (125) Hero (animações base)
    7.  (137) Subheadline
    8.  (151) Frase provocativa
    9.  (167) Botão principal da hero
    10. (188) Seções genéricas de conteúdo
    11. (220) Formulário de contato
    12. (274) Alertas de feedback
    13. (327) Seção Planos
    14. (343) Cards (container, card, destaque, imagens)
    15. (413) Header
    16. (433) Navegação (links, hover underline)
    17. (464) Botão hambúrguer (mobile)
    18. (480) Overlay do menu mobile
    19. (502) Ecossistema (círculo e animação de onda)
    20. (547) Ecossistema (itens e labels)
    21. (589) Ecossistema (distribuição dos 8 ícones)
    22. (600) Ecossistema (responsividade)
    23. (618) Footer (layout e cores)
    24. (652) Seção segurança (bloco, textos, imagem)
    25. (681) Botões fixos (Back to top)
    26. (713) Botões fixos (WhatsApp)
    27. (743) Navegação mobile (layout e responsividade)
    28. (777) Preferência por movimento reduzido
    29. (783) Scrollbar personalizado
    30. (796) Indicador de scroll (mouse, arrows, animações)
    31. (887) Acessibilidade
   =========================== */

/* ===== 1. Reset ===== */
.landing-page * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ===== fim Reset ===== */

/* ===== 2. Body ===== */
body.landing-page {
  min-height: 100vh;
  background: url("../../bg_aslabs_realista.png") no-repeat center center fixed;
  background-size: cover;
  background-color: var(--color-bg); /* fallback acessível */
  font-family: var(--font-main, 'Orbitron', sans-serif);
  color: var(--color-text-primary); /* texto principal AAA no dark */
  position: relative;
  line-height: 1.8;
  font-size: 18px;
}
/* ===== fim Body ===== */

/* ===== 3. Overlay de contraste global ===== */
body.landing-page::before {
  content: "";
  position: fixed;
  inset: 0;
  /* overlay reforçado para garantir leitura em áreas com imagem */
  background: var(--overlay-bg, transparent);/*linear-gradient(135deg, rgba(13,13,15,0.85) 0%, rgba(27,27,31,0.85) 100%); comentado para respeitar tema */
  z-index: -1;
}
/* ===== fim Overlay de contraste global ===== */

/* ===== 4. Hero (headline) ===== */
.landing-page .hero {
  min-height: calc(100vh - 70px); /* desconta a altura do header fixo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 20px 0;
  position: relative; /* fixa o scroll-indicator na hero */
  z-index: 0;
}

.hero-headline {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 4px;
}

.hero-headline .parte1,
.hero-headline .parte2 {
  display: block;
  font-weight: 700;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s forwards;
}

.hero-headline .parte1 {
  color: var(--color-text-primary); /* branco acessível no dark */
  animation-delay: 0.2s;
}

.hero-headline .parte2 {
  color: var(--color-primary); /* dourado acessível no dark */
  animation-delay: 0.6s;
}

@media (max-width: 768px) {
  .landing-page .hero h1 { font-size: 2rem; }
}
/* ===== fim Hero (headline) ===== */

/* ===== 5. Hero (logo) ===== */
.hero-symbol {
  width: 200px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.5));
}

@media (max-width: 768px) {
  .hero-symbol {
    width: 120px;
    margin-bottom: 8px;
  }
}
/* ===== fim Hero (logo) ===== */

/* ===== 6. Hero (animações base) ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* ===== fim Hero (animações base) ===== */

/* ===== 7. Subheadline ===== */
.landing-page .subheadline {
  font-size: 1.25rem;
  max-width: 700px;
  margin-bottom: 40px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s forwards;
  animation-delay: 0.8s;
}
/* ===== fim Subheadline ===== */

/* ===== 8. Frase provocativa ===== */
.hero-provocativo p {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-primary) !important;
  margin: 6px 0;
  opacity: 0;
  transform: translateX(40px);
  animation: slideInRight 0.8s forwards;
}

.hero-provocativo p:nth-child(1) { animation-delay: 1s; }
.hero-provocativo p:nth-child(2) { animation-delay: 1.4s; }
.hero-provocativo p:nth-child(3) { animation-delay: 1.8s; }
/* ===== fim Frase provocativa ===== */

/* ===== 9. Botão principal da hero ===== */
.landing-page .hero .btn {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  color: #000; /* alto contraste contra dourado claro */
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  transition: var(--transition);
}

.landing-page .hero .btn:hover,
.landing-page .hero .btn:focus {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 0 12px rgba(255,215,0,.6);
  transform: translateY(-2px);
  outline: none;
}
/* ===== fim Botão principal da hero ===== */

/* ===== 10. Seções genéricas de conteúdo ===== */
.landing-page section {
  min-height: 100vh;
  padding: 120px 20px 80px;
  background: rgba(0,0,0,0.65); /* overlay escuro para garantir contraste */
  border-radius: var(--radius);
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.landing-page section.visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-page section h2 {
  color: var(--color-primary);
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.landing-page section p {
  max-width: 800px;
  margin: 0 auto 16px;
  color: var(--color-text-primary);
  font-size: 1.15rem;
  line-height: 1.7;
}
/* ===== fim Seções genéricas de conteúdo ===== */

/* ===== 11. Formulário de contato ===== */
.landing-page .form-contato {
  max-width: 600px;
  margin: 30px auto 0;
  text-align: left;
}

.landing-page .form-contato label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
  color: var(--color-primary);
}

.landing-page .form-contato input,
.landing-page .form-contato textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  transition: var(--transition);
}

.landing-page .form-contato input:focus,
.landing-page .form-contato textarea:focus {
  background: #2b2b2b;
  box-shadow: 0 0 8px rgba(255,215,0,.35);
  outline: 2px solid rgba(244,182,58,.35);
  outline-offset: 2px;
}

.landing-page .form-contato button {
  margin-top: 20px;
  padding: 12px 30px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.landing-page .form-contato button:hover {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 0 12px rgba(255,215,0,.6);
  transform: translateY(-2px);
}
/* ===== fim Formulário de contato ===== */

/* ===== 12. Alertas de feedback ===== */
.landing-page .alerta-sucesso,
.landing-page .alerta-erro {
  padding: 12px 16px;
  margin: 20px auto;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  max-width: 600px;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  opacity: 1;
  transition: opacity 0.8s ease;
}

.landing-page .alerta-sucesso[hidden],
.landing-page .alerta-erro[hidden] {
  display: none !important;
  opacity: 0;
}

.landing-page .fade-out { opacity: 0; }

/* Sucesso */
.landing-page .alerta-sucesso {
  background-color: #e6f9ed;
  color: #0f5132;
  border: 1px solid #badbcc;
}

/* Erro */
.landing-page .alerta-erro {
  background-color: #fbeaea;
  color: #842029;
  border: 1px solid #f5c2c7;
}

.landing-page .alerta-sucesso:focus,
.landing-page .alerta-erro:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .landing-page .alerta-sucesso,
  .landing-page .alerta-erro {
    font-size: 0.9rem;
    margin: 15px auto;
    padding: 10px 12px;
  }
}
/* ===== fim Alertas de feedback ===== */

/* ===== 13. Seção Planos ===== */
.landing-page .planos-aslabs {
  padding: 50px 20px;
  background: rgba(0,0,0,.75);
  color: var(--color-text-primary);
  text-align: center;
  border-radius: var(--radius);
}

.landing-page .planos-aslabs h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: var(--color-primary);
}
/* ===== fim Seção Planos ===== */

/* ===== 14. Cards ===== */
.landing-page .cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
}

.landing-page .card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  transition: transform .25s, box-shadow .25s;
}

.landing-page .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,.7);
}

.landing-page .card h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: var(--color-primary);
}

.landing-page .card .tagline {
  font-style: italic;
  margin-bottom: 15px;
  color: var(--color-text-primary);
}

.landing-page .card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.landing-page .card ul li { margin: 8px 0; }

.landing-page .card .btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--color-primary);
  color: #111;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: var(--transition-fast);
}

.landing-page .card .btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.landing-page .card.destaque {
  border: 2px solid var(--color-primary);
}

.landing-page .card img {
  width: 100%;
  max-width: 250px;
  margin: 0 auto 15px;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
/* ===== fim Cards ===== */

/* ===== 15. Header ===== */
.landing-page header.landing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: var(--gradient-header); /* rgba(0,0,0,.7); comentado para respeitar tema*/
  background-color: var(--gradient-header);  /* add para respeitar tema */
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
}

.landing-page header.landing-header img {
  max-height: 60px;
  height: auto;
  width: auto;
}

/* Botão de acessibilidade no header */
#accessibility-toggle {
  position: absolute;        /* fixo dentro do header */
  top: 50%;
  right: 20px;               /* distância da borda direita */
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-primary); /* ícone dourado */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* área clicável maior */
  height: 44px;
  border-radius: var(--radius-sm);
  transition: background .1s ease;
  z-index: 2001; /* acima do nav */
}
#accessibility-toggle svg {
  width: 26px;   /* ícone maior */
  height: 26px;
  pointer-events: none; /* clique passa para o botão */
}
#accessibility-toggle:hover,
#accessibility-toggle:focus {
  background: var(--color-surface-alt);
  outline: var(--focus-outline);
}
/* ===== fim Header ===== */

/* ===== 16. Navegação ===== */
.landing-page header.landing-header nav {
  display: flex;
  gap: 20px;
  padding-right: 80px; /* 👈 reserva espaço real para o botão ♿️ */
  position: relative;
  z-index: 1;          /* nav fica abaixo do botão */
}

.landing-page header.landing-header nav a {
  position: relative;
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 4px;
}

.landing-page header.landing-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--color-primary);
  transition: width .3s ease;
}

.landing-page header.landing-header nav a:hover::after,
.landing-page header.landing-header nav a:focus::after {
  width: 100%;
}
/* ===== fim Navegação ===== */

/* ===== 17. Botão hambúrguer (mobile) ===== */
.landing-page .menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.landing-page .menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--color-text-primary);
  border-radius: 2px;
}
/* ===== fim Botão hambúrguer ===== */

/* ===== 18. Overlay do menu mobile ===== */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 99;
}

.nav-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 769px) {
  .nav-overlay { display: none; }
}
/* ===== fim Overlay do menu mobile ===== */

/* ===== 19. Ecossistema (círculo e onda) ===== */
.ecosfera {
  position: relative;
  width: 480px;
  height: 480px;
  margin: 60px auto;
}

.ecosfera-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
}

.ecosfera-logo {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.6));
}

.ecosfera-ring::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  opacity: 0;
  outline: 2px solid rgba(212,175,55,0.85);
  box-shadow: 0 0 10px rgba(212,175,55,0.55),
              0 0 22px rgba(212,175,55,0.35);
  transform: scale(0.92);
  animation: ecosfera-onda 2s ease-in-out infinite;
}

@keyframes ecosfera-onda {
  0% { opacity: 0; transform: scale(0.92); }
  15% { opacity: 1; transform: scale(0.98); }
  50% { opacity: 0.85; transform: scale(1.08); }
  85% { opacity: 0.3; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(0.92); }
}
/* ===== fim Ecossistema (círculo e onda) ===== */

/* ===== 20. Ecossistema (itens e labels) ===== */
.ecosfera-item {
  position: absolute;
  z-index: 2;
  width: 90px; height: 90px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .3s, box-shadow .3s;
}

.ecosfera-item img {
  width: 60px; height: 60px;
  pointer-events: none;
}

.ecosfera-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: var(--color-text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s;
}

.ecosfera-item:hover::after { opacity: 1; }
.ecosfera-item:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(212,175,55,0.6);
}
/* ===== fim Ecossistema (itens e labels) ===== */

/* ===== 21. Ecossistema (distribuição dos ícones) ===== */
.ecosfera-item:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(2) { top: 20%; left: 85%; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(3) { top: 50%; left: 100%; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(4) { top: 80%; left: 85%; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(5) { top: 100%; left: 50%; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(6) { top: 80%; left: 15%; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(7) { top: 50%; left: 0; transform: translate(-50%, -50%); }
.ecosfera-item:nth-child(8) { top: 20%; left: 15%; transform: translate(-50%, -50%); }
/* ===== fim Ecossistema (distribuição dos ícones) ===== */

/* ===== 22. Ecossistema (responsividade) ===== */
@media (max-width: 768px) {
  .ecosfera { width: 300px; height: 300px; }
  .ecosfera-logo { width: 90px; }
  .ecosfera-item { width: 70px; height: 70px; }
  .ecosfera-item img { width: 46px; height: 46px; }
  .ecosfera-item::after { font-size: 0.65rem; bottom: -34px; }
}

@media (max-width: 480px) {
  .ecosfera { width: 240px; height: 240px; }
  .ecosfera-logo { width: 70px; }
  .ecosfera-item { width: 60px; height: 60px; }
  .ecosfera-item img { width: 40px; height: 40px; }
  .ecosfera-item::after { font-size: 0.6rem; bottom: -28px; }
}
/* ===== fim Ecossistema (responsividade) ===== */

/* ===== 23. Footer ===== */
.landing-footer {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 20px;
  background: rgba(0,0,0,.8);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 98;
}

.landing-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.landing-footer a:hover { text-decoration: underline; }

.landing-footer .footer-security img.footer-badge {
  height: 150px;
  width: auto;
  display: block;
  position: relative;
  top: 8px;
  left: -30px;
}
/* ===== fim Footer ===== */

/* ===== 24. Seção Segurança ===== */
.landing-page .seguranca {
  margin-top: 40px;
  padding: 30px 20px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.landing-page .seguranca h3 {
  color: var(--color-primary);
  margin-bottom: 15px;
}

.landing-page .seguranca p {
  color: var(--color-text-primary);
  margin-bottom: 20px;
}

.landing-page .seguranca img {
  display: block;
  margin: 0 auto;
  max-height: 120px;
  width: auto;
}
/* ===== fim Seção Segurança ===== */

/* ===== 25. Botão fixo (Back to top) ===== */
.back-to-top {
  position: fixed;
  left: 20px;
  bottom: 90px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .2s ease;
  z-index: 101;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-2px);
  background: var(--color-primary-dark);
}
/* ===== fim Botão fixo (Back to top) ===== */

/* ===== 26. Botão fixo (WhatsApp) ===== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 75px;
  color: #fff;
  width: 55px; height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  z-index: 103;
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}

.whatsapp-float svg {
  display: block;
  margin: auto;
  width: 28px; height: 28px;
  fill: #fff;
}
/* ===== fim Botão fixo (WhatsApp) ===== */

/* ===== 27. Navegação mobile (responsividade) ===== */
@media (max-width: 768px) {
  .landing-page header.landing-header nav {
    position: absolute;
    top: 60px; right: 0;
    flex-direction: column;
    background: rgba(0,0,0,.9);
    width: 200px;
    padding: 15px;
    display: none;
  }
  .landing-page header.landing-header nav.active { display: flex; }
  .landing-page .menu-toggle { display: flex; }

  .landing-page .hero h1 { font-size: 2rem; }
  .landing-page .hero p { font-size: .95rem; }
  .landing-page section { padding: 100px 15px 60px; }

  .landing-footer { flex-direction: column; gap: 10px; }
  .landing-footer .footer-security img.footer-badge {
    height: 80px;
    top: 0; left: 0;
  }

  .back-to-top { bottom: 110px; left: 16px; }
  .whatsapp-float {
    right: 16px;
    bottom: 40px;
    width: 50px; height: 50px;
  }
  .whatsapp-float svg { width: 24px; height: 24px; }

  /* Ajustes mobile para acessibilidade */
  #accessibility-panel {
    top: auto;
    bottom: 20px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: 320px;
  }
}
/* ===== fim Navegação mobile ===== */

/* ===== 28. Preferência por movimento reduzido ===== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* ===== fim Movimento reduzido ===== */

/* ===== 29. Scrollbar personalizado ===== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 5px;
  border: 2px solid #111;
}

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--color-primary) #111; }
/* ===== fim Scrollbar personalizado ===== */

/* ===== 30. Indicador de scroll ===== */
.scroll-indicator {
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 50;
  opacity: 1;
  transition: opacity .6s ease;
}

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-indicator .mouse {
  width: 28px;
  height: 45px;
  border: 2px solid var(--color-primary);
  border-radius: 20px;
  margin: 0 auto 10px;
  position: relative;
}

.scroll-indicator .wheel {
  width: 4px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 2px;
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  animation: wheel-move 1.5s infinite;
}

@keyframes wheel-move {
  0% { opacity: 0; top: 8px; }
  50% { opacity: 1; top: 14px; }
  100% { opacity: 0; top: 20px; }
}

.scroll-indicator .arrows span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: rotate(45deg);
  margin: -3px auto;
  animation: arrow-bounce 1.5s infinite;
}

.scroll-indicator .arrows span:nth-child(2) { animation-delay: .2s; }
.scroll-indicator .arrows span:nth-child(3) { animation-delay: .4s; }

@keyframes arrow-bounce {
  0% { opacity: 0; transform: rotate(45deg) translateY(-5px); }
  50% { opacity: 1; transform: rotate(45deg) translateY(0); }
  100% { opacity: 0; transform: rotate(45deg) translateY(5px); }
}
/* ===== fim Indicador de scroll ===== */

/* ===== 31. Acessibilidade ===== */
#accessibility-panel[hidden] {
  display: none !important;
}
#accessibility-panel {
  position: fixed;
  top: 70px; /* abaixo do header */
  right: 20px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 2000;
  font-size: 0.875rem;
  width: 220px;
}
#accessibility-panel h2 {
  margin-top: 0;
  font-size: 1rem;
}
#accessibility-panel .section {
  margin-bottom: 0.75rem;
}
#accessibility-panel button {
  margin: 0.25rem 0.25rem 0 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: var(--color-primary);
  color: #000;
  font-size: 0.85rem;
}
#accessibility-panel button:hover,
#accessibility-panel button:focus {
  background: var(--color-primary-dark);
  outline: var(--focus-outline);
}
#accessibility-panel input[type="range"] {
  width: 100%;
}
/* ===== fim Acessibilidade ===== */