/* =============================
   HEADER / NAV / HERO - PADRÃO
================================ */

.header{
  width: 100%;
}

.nav.container{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 20px;
  min-height: var(--nav-h, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* botão hamburger existe no HTML, mas se você não usa na página interna,
   pode manter escondido para não "poluir" */
.nav__toggle{
  display: none;
}

.nav__overlay{
  display: none;
}

.menu.menu--only-logo{
  width: 100%;
}

.menu--only-logo .menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__item--logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.logo-img{
  display: block;
  height: 44px;   /* ajuste se quiser */
  width: auto;
}


/* =========================
   HERO PADRÃO
========================= */
.about-hero{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-hero__bg{
  position: absolute;
  inset: 0;
  background: url("./img/hero-about.webp") center/cover no-repeat;
  z-index: 1;
}

.about-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2;
}

.about-hero__content{
  padding-top: 60px;
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  color: #fff;
}

.about-hero__kicker{
  display: block;
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #28c700;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.about-hero__title{
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.1;
  text-shadow: 0 6px 18px rgba(0,0,0,.65);
}

.about-hero__text{
  font-size: 17px;
  line-height: 1.6;
  color: #28c700;
  max-width: 720px;
  margin: 0 auto;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}









/* ==================================================
   RESPONSIVO — HEADER / NAV / HERO (PADRÃO)
   Regras:
   - NÃO altera desktop (>=1200px) → só ajusta abaixo
   - Sem scroll horizontal
   - Mais respiro nas bordas em telas menores
   - Textos legíveis e imagem do hero sem distorção
================================================== */

/* ---------- Anti-scroll horizontal (segurança) ---------- */
@media (max-width: 1199.98px){
  html, body{
    overflow-x: hidden;
  }

  /* evita algum elemento “vazar” por width/transform */
  .header,
  .about-hero{
    width: 100%;
    max-width: 100%;
  }
}

/* ==================================================
   MOBILE — até 575.98px
================================================== */
@media (max-width: 575.98px){

  /* ---------- NAV ---------- */
  .nav.container{
    width: 100%;
    padding: 0 16px;              /* respiro lateral (sem colar na borda) */
    min-height: 72px;             /* reduz um pouco a altura em mobile */
  }

  .logo-img{
    height: 40px;                 /* logo um pouco menor pra caber bem */
  }

  /* ---------- HERO ---------- */
  .about-hero{
    height: auto;                 /* evita “aperto” e cortes ruins */
    min-height: 340px;
    padding: 24px 0;              /* espaço vertical */
  }

  .about-hero__bg{
    background-position: center;  /* garante foco central */
  }

  .about-hero__content{
    padding-top: 54px;            /* mantém afastamento do topo */
    padding-left: 16px;           /* margem nos textos */
    padding-right: 16px;          /* margem nos textos */
    max-width: 100%;
  }

  .about-hero__kicker{
    font-size: 12px;
    letter-spacing: .22em;
    margin-bottom: 10px;
  }

  /* mantém o clamp (identidade), mas garante legibilidade */
  .about-hero__title{
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.12;
    margin-bottom: 12px;
    word-break: normal;
    overflow-wrap: anywhere;      /* evita estourar largura em palavras longas */
  }

  .about-hero__text{
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: anywhere;      /* evita scroll horizontal por texto */
  }
}

/* ==================================================
   TABLET MINI — 576px até 991.98px
================================================== */
@media (min-width: 576px) and (max-width: 991.98px){

  /* ---------- NAV ---------- */
  .nav.container{
    width: 100%;
    padding: 0 18px;              /* respiro consistente */
    min-height: 80px;
  }

  .logo-img{
    height: 42px;
  }

  /* ---------- HERO ---------- */
  .about-hero{
    height: 52vh;                 /* mantém feel do desktop, sem “apertar” */
    min-height: 380px;
  }

  .about-hero__content{
    padding-top: 58px;
    padding-left: 20px;           /* margem nos textos */
    padding-right: 20px;          /* margem nos textos */
    max-width: 900px;
  }

  .about-hero__title{
    font-size: clamp(34px, 5.2vw, 54px);
  }

  .about-hero__text{
    font-size: 16.5px;
    max-width: 680px;
    overflow-wrap: anywhere;
  }
}

/* ==================================================
   TABLET PRO — 992px até 1199.98px
================================================== */
@media (min-width: 992px) and (max-width: 1199.98px){

  /* ---------- NAV ---------- */
  .nav.container{
    width: 100%;
    padding: 0 20px;              /* mantém o padrão, só garantindo 100% */
  }

  /* ---------- HERO ---------- */
  .about-hero{
    height: 50vh;                 /* mantém igual ao desktop */
    min-height: 360px;            /* mantém igual ao desktop */
  }

  .about-hero__content{
    padding-left: 20px;           /* garante respiro lateral */
    padding-right: 20px;
    max-width: 900px;
  }

  .about-hero__text{
    overflow-wrap: anywhere;      /* proteção contra overflow por texto */
  }
}

/* ==================================================
   EXTRA LARGE — >=1200px
   (Sem alterações: desktop permanece idêntico)
================================================== */