html, body {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #f8fafc;

  /* ✅ melhor para responsividade: o body não precisa centralizar tudo */
  display: flex;
  flex-direction: column;
  align-items: stretch;

  min-height: 100vh;
  justify-content: flex-start;

  /* ✅ espaço pro header fixo (vai ajustar com media query depois) */
  padding-top: 90px;
  padding-bottom: 40px;

  background-image: url("../img/fundo3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ✅ tipografia responsiva */
h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 10px; }
h2 { font-size: clamp(1.2rem, 3vw, 2rem); }

p {
  color: #94a3b8;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.6;
}

/* =========================
   TOP BAR (responsivo)
   ========================= */
.top-bar {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 92%);
  min-height: 60px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  border-radius: 20px;
  background-color: rgba(65, 4, 70, 0.529);
}

.top-bar-content {
  font-family: cursive;
  height: 100%;
  margin: 0 auto;
  padding: 10px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; /* ✅ no mobile quebra em 2 linhas */
}

.top-bar span {
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  font-weight: bold;
  color: #f8fafc;
}

.top-bar nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap; /* ✅ evita estourar */
  justify-content: flex-end;
}

.top-bar nav a {
  text-decoration: none;
  color: #94a3b8;
  font-size: clamp(1rem, 2vw, 1.4rem);
}

.top-bar nav a:hover {
  color: chartreuse;
}

/* =========================
   HERO
   ========================= */
.containerrr {
  width: min(900px, 92%);
  margin: 60px auto 30px; /* ✅ remove margin-top gigante */
  text-align: center;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 12px;
  background: #00000093;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

.containerrr h1,
.containerrr h2 {
  color: white;
  position: relative;
  overflow: hidden;
}

.containerrr h1::after,
.containerrr h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f172a;
  transform: translateX(0);
  animation: reveal 1.2s ease forwards;
}

.containerrr h2::after { animation-delay: 0.3s; }

@keyframes reveal {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

.centro {
  width: min(1200px, 92%);
  margin: 0 auto;
  text-align: center;
}
.centro p { color: chartreuse; }

/* =========================
   LINHA ANIMADA
   ========================= */
.line-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.green-line {
  height: 50px;
  display: block;
  animation: grow-reset 1.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes grow-reset {
  0%   { transform: scaleY(0); opacity: 1; }
  80%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* =========================
   SOBRE (flex responsivo)
   ========================= */
.sobre-container {
  width: min(1200px, 92%);
  margin: 80px auto 0;

  display: flex;
  gap: clamp(16px, 5vw, 60px); /* ✅ remove gap absurdo */
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* ✅ mobile vira coluna */
}

#sobre, #projetos {
  scroll-margin-top: 120px;
}

.texto-externo {
  flex: 1 1 380px;           /* ✅ cresce e quebra no mobile */
  max-width: 650px;
  margin-top: 10px;

  position: relative;
  font-size: 1.1rem;
  color: #94a3b8;
  text-align: justify;

  border-radius: 20px;
  padding: 0 22px 10px 16px; /* ✅ padding mais saudável */
  z-index: 1;
  overflow: hidden;
}

.texto-externo h1 { color: chartreuse; }

.texto-externo::before,
.texto-externo::after {
  content: "";
  position: absolute;
  background-color: #020617;
  transition: all 0.8s ease;
}

.texto-externo::before {
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #020617;
  z-index: -1;
}

.texto-externo::after {
  top: 0;
  right: 15px;
  width: 6px;
  height: 0;
  background-color: #38bdf8;
  z-index: 0;
}

.texto-externo.ativo::before { width: 100%; }
.texto-externo.ativo::after {
  height: 100%;
  transition-delay: 0.8s;
}

/* GRID IMAGENS: ✅ auto-fit resolve em qualquer tela */
.grid-imagens {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 12px;
  margin-top: 10px;
  align-items: start;
}

.grid-imagens img {
  width: 100%;
  max-width: 90px;
  aspect-ratio: 1 / 1; /* ✅ quadradinho perfeito */
  object-fit: cover;
  border-radius: 8px;
  background: #020617;
}

/* =========================
   PROJETOS (carrossel + texto)
   ========================= */
.projetos-wrapper {
  width: min(1200px, 92%);
  margin: 40px auto 0;

  display: flex;
  gap: clamp(16px, 4vw, 50px);
  align-items: flex-start;
  flex-wrap: wrap; /* ✅ empilha no mobile */
}

/* carrossel */
#carouselProjetos {
  flex: 1 1 360px;
  width: 100%;
  max-width: 520px;

  border-radius: 16px;
  overflow: hidden;
  background: #00000093;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

#carouselProjetos img {
  height: clamp(200px, 32vw, 280px);
  object-fit: cover;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(62%) sepia(97%) saturate(405%) hue-rotate(40deg) brightness(95%) contrast(95%);
}

/* texto direita */
.texto-direita {
  flex: 1 1 380px;
  max-width: 650px;

  margin-top: 0;
  position: relative;
  font-size: 1.1rem;
  color: #94a3b8;
  text-align: justify;

  border-radius: 20px;
  padding: 0 16px 10px 22px;
  z-index: 1;
  overflow: hidden;
}

.texto-direita h1 { text-align: right; color: chartreuse; }

.texto-direita::before,
.texto-direita::after {
  content: "";
  position: absolute;
  top: 0;
  transition: all 0.8s ease;
}

.texto-direita::before {
  right: 0;
  width: 100%;
  height: 100%;
  background: #020617;
  z-index: -1;

  transform: scaleX(0);
  transform-origin: right;
}

.texto-direita::after {
  left: 15px;
  width: 6px;
  height: 0;
  background: #38bdf8;
  z-index: 0;
  transition: height 0.8s ease;
}

.texto-direita.ativo::before { transform: scaleX(1); }
.texto-direita.ativo::after {
  height: 100%;
  transition-delay: 0.8s;
}

/* cores da barrinha */
.texto-direita.linha-azul::after    { background-color: #38bdf8; }
.texto-direita.linha-verde::after   { background-color: chartreuse; }
.texto-direita.linha-roxa::after    { background-color: #a855f7; }
.texto-direita.linha-laranja::after { background-color: #fb923c; }

/* reiniciar barrinha */
.texto-direita.reiniciar-linha::after {
  height: 0 !important;
  transition: none !important;
}

/* =========================
   CONTATO (sem margens fixas)
   ========================= */
.contato-wrapper {
  width: min(1200px, 92%);
  margin: 60px auto 0;

  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap; /* ✅ mobile empilha */
}

.contato {
  flex: 1 1 380px;
  max-width: 650px;

  position: relative;
  font-size: 1.1rem;
  color: #94a3b8;
  text-align: justify;

  border-radius: 20px;
  padding: 0 22px 10px 16px;
  z-index: 1;
  overflow: hidden;

  background-color: #020617;
}

.contato h1 { color: chartreuse; }

.contato-botoes {
  flex: 0 1 220px;
  min-width: 200px;
}

/* =========================
   MEDIA QUERY extra (mobile)
   ========================= */
@media (max-width: 520px) {
  body { padding-top: 110px; } /* header pode ficar 2 linhas */
  .top-bar { border-radius: 16px; }
  .top-bar-content { justify-content: center; }
  .top-bar nav { justify-content: center; }
}