/* =========================
   RESET E CONFIGURAÇÕES GERAIS
   Reset de estilos e configurações base
========================= */
*{
  margin:0; /* Remove margens padrão de todos os elementos */
  padding:0; /* Remove preenchimento padrão de todos os elementos */
  box-sizing:border-box; /* Inclui borda e padding no cálculo da largura/altura */
  font-family:Arial,Helvetica,sans-serif; /* Fonte padrão do site */
}

/* Configurações do HTML e Body */
html,body{
  width:100%; /* Largura total */
  min-height:100%; /* Altura mínima de 100% da viewport */
}

/* =========================
   CORPO DO SITE
   Configurações gerais do body
========================= */
body{
  min-height:100vh; /* Altura mínima igual à viewport */
  display:flex; /* Layout flexível */
  justify-content:center; /* Centraliza conteúdo horizontalmente */
  position:relative; /* Posição relativa para elementos absolute dentro */
  overflow:hidden; /* Esconde conteúdo que ultrapassa os limites */
  background:linear-gradient(180deg,var(--cor-fundo-gradiente-topo) 0%, var(--cor-fundo-gradiente-meio) 45%, var(--cor-fundo-gradiente-baixo) 100%); /* Fundo gradiente dourado vertical */
}

/* =========================
   FUNDO ANIMADO
   Layer com imagens que se movem
========================= */
.bg-stage{
  position:fixed; /* Posição fixa na tela (não move com scroll) */
  inset:0; /* Posição: topo, direita, baixo, esquerda = 0 */
  z-index:0; /* Camada mais baixa */
  overflow:hidden; /* Esconde conteúdo que ultrapassa */
}

.bg-layer{
  position:absolute; /* Posição absoluta em relação ao stage */
  width:150%; /* Largura 150% do container */
  height:150%; /* Altura 150% do container */
  left:-25%; /* Desloca 25% para esquerda */
  top:-25%; /* Desloca 25% para cima */
  display:flex; /* Layout flexível */
  flex-direction:column; /* Elementos em coluna */
  justify-content:space-between; /* Espaço igual entre linhas */
  transform:rotate(-5deg); /* Rotação de 5 graus */
  transform-origin:center center; /* Rotação a partir do centro */
}

/* Linha horizontal de imagens */
.bg-row{
  display:flex; /* Imagens em linha */
  width:100%; /* Largura total */
  margin-bottom:0; /* Sem margem entre linhas */
  animation: slideRow 20s linear infinite; /* Animação de slide infinita */
  flex-wrap:nowrap; /* Não quebra linha */
}

/* Linhas pares com animação reversa */
.bg-row:nth-child(even){
  margin-left:0;
  animation-direction: reverse; /* Animação invertida */
  animation-duration: 25s; /* Animação mais lenta */
}

/* Animação de deslize horizontal */
@keyframes slideRow{
  from{ transform: translateX(0); } /* Posição inicial */
  to{ transform: translateX(-50%); } /* Move 50% para esquerda */
}

/* Item individual do fundo (container da imagem) */
.bg-item{
  width:200px; /* Largura fixa */
  height:260px; /* Altura fixa */
  flex-shrink:0; /* Não encolhe */
  opacity:0.25; /* Opacidade de 25% (imagem suave) */
  overflow:hidden; /* Esconde parte da imagem que ultrapassa */
}

/* Imagem dentro do item do fundo */
.bg-item img{
  width:100%; /* Largura total do container */
  height:100%; /* Altura total do container */
  object-fit:cover; /* Cobre todo o espaço sem distorcer */
}

/* Overlay que cobre o fundo (opcional, para criar camada) */
.bg-overlay{
  position:absolute; /* Posição absoluta */
  inset:0; /* Ocupa todo o espaço */
  z-index:2; /* Camada acima do fundo */
  pointer-events:none; /* Permite clique através do overlay */
}

/* =========================
   CABEÇALHO
   Logo + lista de serviços lado a lado
========================= */
.header{
  display:flex; /* Layout em linha */
  align-items:center; /* Alinha verticalmente */
  justify-content:flex-start; /* Alinha à esquerda */
  margin-bottom:12px; /* Espaço abaixo do header */
  gap:12px; /* Espaço entre logo e lista */
}

.logo{
  width:180px; /* Largura do logo */
  margin:0; /* Sem margem quando em linha */
  display:block; /* Elemento de bloco */
}

/* =========================
   LISTA DE SERVIÇOS
========================= */
.servicos{
  list-style:none; /* Remove marcadores */
  text-align:left; /* Alinha à esquerda */
  margin:0;
  padding:0;
}

.servicos li{
  font-size:13px; /* Tamanho maior */
  color:var(--cor-texto-principal); /* Cor marrom escuro */
  font-weight:600; /* Semi-bold */
  line-height:1.3; /* Altura da linha */
  margin-bottom:2px; /* Espaço entre itens */
}

/* =========================
   CONTAINER PRINCIPAL
   Área central que contém todo o conteúdo
========================= */
.container{
  position:relative; /* Posição relativa para elementos dentro */
  z-index:10; /* Camada acima do fundo */
  width:100%; /* Largura total */
  max-width:420px; /* Largura máxima de 420px (limita em telas grandes) */
  padding:28px 15px 26px; /* Espaçamento interno (topo, dir, baixo, esq) */
  text-align:center; /* Texto centralizado */
  max-height:100vh; /* Altura máxima igual à viewport */
  overflow-y:auto; /* Permite scroll vertical se necessário */
  scrollbar-width:thin; /* Scrollbar fina (Firefox) */
  scrollbar-color:var(--cor-scrollbar-thumb) var(--cor-scrollbar-track); /* Cores: thumb e track do scroll */
}

/* Scrollbar customizada (Chrome/Safari) */
.container::-webkit-scrollbar{
  width:6px; /* Largura de 6px */
}

.container::-webkit-scrollbar-track{
  background:var(--cor-scrollbar-track); /* Cor do trilho do scroll */
}

.container::-webkit-scrollbar-thumb{
  background:var(--cor-scrollbar-thumb); /* Cor do botão do scroll */
  border-radius:3px; /* Bordas arredondadas */
}

/* =========================
   LOGO DO SITE
========================= */
.logo{
  width:180px; /* Largura do logo */
  margin:0 auto 12px; /* Centraliza (auto) e espaço abaixo */
  display:block; /* Elemento de bloco */
}

/* =========================
   TÍTULO PRINCIPAL
========================= */
.title{
  font-size:15px; /* Tamanho da fonte */
  color:var(--cor-texto-principal); /* Cor marrom escuro */
  font-weight:700; /* Negrito bold */
  margin-bottom:10px; /* Espaço abaixo do título */
  line-height:1.4; /* Altura da linha */
  text-shadow:0 1px 2px rgba(255,255,255,0.10); /* Sombra clara no texto */
}

/* =========================
   TEXTO INTRODUTÓRIO
   Texto acima dos cards
========================= */
.intro-text{
  font-size:16px;
  color:var(--cor-texto-principal);
  font-weight:600;
  text-align:center;
  margin-bottom:8px;
  line-height:1.4;
}

.intro-text.horario{
  margin-bottom:16px;
}

/* =========================
   RODAPÉ
========================= */
.footer{
  margin-top:18px; /* Espaço acima do rodapé */
  color:#2a171d; /* Cor marrom escuro */
  font-size:13px; /* Tamanho da fonte */
  font-weight:700; /* Negrito bold */
  letter-spacing:0.3px; /* Espaço entre letras */
}

/* =========================
   RESPONSIVO - TABLET
   Ajustes para telas de até 768px
========================= */
@media (max-width:768px){
  /* Itens do fundo menores */
  .bg-item{
    width:150px;
    height:200px;
  }

  /* Container um pouco menor */
  .container{
    max-width:400px;
    padding:24px 14px 24px;
  }

  /* Logo menor */
  .logo{
    width:180px;
  }

  /* Header em linha no mobile */
  .header{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    gap:0;
  }

  /* Lista de serviços centralizada no tablet */
  .servicos{
    text-align:left;
    margin-top:8px;
  }
}

/* =========================
   RESPONSIVO - MOBILE
   Ajustes para telas de até 420px
========================= */
@media (max-width:420px){
  /* Itens do fundo ainda menores */
  .bg-item{
    width:120px;
    height:160px;
  }

  /* Título menor */
  .title{
    font-size:14px;
  }

  /* Logo menor */
  .logo{
    width:180px;
  }

  /* Header em linha no mobile */
  .header{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    gap:0;
  }

  /* Logo menor no mobile */
  .logo{
    width:120px;
    flex:1;
    padding: 10px 10px 0px 10px;
  }

  /* Lista de serviços ocupa metade */
  .servicos{
    text-align:left;
    margin-top:0;
    flex:1;
  }

  .servicos li{
    font-size:13px;
  }

  /* Subtítulo menor */
  .card-sub{
    font-size:10px;
  }
}