/* =============== Landing (index) ================== */

/* HERO com imagem + véu laranja leve */
header.hero{
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      rgba(255,127,50,.72) 0%,
      rgba(255,127,50,.58) 38%,
      rgba(255,127,50,.70) 100%
    ),
    url("/static/bocaboca/images/home/home.jpg") center/cover no-repeat; /* caminho relativo ao CSS */
}
.hero-inner{ width: min(860px, 92vw); }
header.hero h1{
  font-weight: 900;
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  margin-bottom: .9rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}

/* Busca central do hero */
.hero-search{
  position: relative;
  margin-inline: auto;
  width: min(720px, 92vw);
}
.hero-input{
  width: 100%;
  height: 56px;
  padding: 0 56px 0 16px;
  background: #fff;
  color: #111;
  border: 3px solid var(--blue-soft); /* azul mais sutil */
  border-radius: 10px;
  outline: none;
}
.hero-input::placeholder{ color:#8794a7; }

/* Botão do ícone (sem borda visível, como você pediu) */
.hero-go{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;                 /* <<< sem borda */
  background: #fff;
  color: var(--blue-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Chips logo abaixo da busca */
.hero-chips{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn-chip{
  padding: 8px 14px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--blue-soft);
  color: var(--blue-soft);
  background: #fff;
  border-radius: 8px;
}
.btn-chip:hover{ background: #f4f7ff; }

/* Faixa “Quero me cadastrar” */
.strip-register{
  background: var(--blue-900);
  color: #fff;
}

/* Stats (borda laranja + centralização) */
.stats{ display: flex; flex-wrap: wrap; margin: 0; }
.counter{
  flex: 1 1 0;
  min-width: 260px;
  background: #fff;
  color: var(--text-900);
  text-align: center;
  padding: 34px 20px;
  border: 2px solid var(--amber);
  margin: 0;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow);
}
.counter h4{
  color: var(--blue-900);
  font-weight: 800;
  font-size: 1.06rem;
  margin-bottom: .45rem;
}
.counter p{
  font-weight: 900;
  font-size: 1.38rem;
  margin: 0;
  line-height: 1.1;
}

/* Portfolio (só imagens clicáveis) */
#portfolio{ margin-top: 20px; }
#portfolio .row.g-0{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
#portfolio .col-4,
#portfolio .col-12.col-md-4{
  position: relative;
  overflow: hidden;
}
#portfolio img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: .3s;
  display: block;
}
/* Link (overlay) fica DENTRO do tile da imagem */
#portfolio .overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.78);
  color: #000;
  font-weight: 800;
  font-size: 1.25rem;
  opacity: 0;
  transition: .25s;
  text-decoration: none;
}
#portfolio .col-4:hover .overlay,
#portfolio .col-12.col-md-4:hover .overlay{ opacity: 1; }
#portfolio .col-4:hover img,
#portfolio .col-12.col-md-4:hover img{
  transform: scale(1.02);
  opacity: 1;
}

/* Depoimentos */
.testimonials-section{
  background: var(--blue-900);
  padding: 70px 0;
}
.testimonials-section h2{
  color: #fff;
  font-weight: 900;
}
#testimonialsCarousel .carousel-item{
  display: flex;
  justify-content: center;
  gap: 30px;
}
.testimonial-box{
  max-width: 320px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

/* Responsivo */
@media (max-width: 991px){
  .navbar .navbar-brand img{ height: 48px; }
}

/* ========== ESPECÍFICO DA LANDING (cores, fundos do hero) ========== */

/* Topo: deixa espaço para logo maior sem “esticar” o resto */
.navbar .nav-cta{ display:flex; align-items:center; gap:.75rem; }
.navbar .nav-cta h4{ font-size:1rem; margin:0; color:var(--text-700); font-weight:600; }

/* HERO da landing: véu âmbar + foto de fundo */
.hero{
  background:
    linear-gradient(
      180deg,
      rgba(255,127,50,.72) 0%,
      rgba(255,127,50,.58) 38%,
      rgba(255,127,50,.70) 100%
    ),
    url("/static/bocaboca/images/home/home.jpg") center/cover no-repeat;
}

/* AUTH hero (login): mesmo look do landing, mas aplicado à classe de auth */
.auth-hero{
  background:
    linear-gradient(
      180deg,
      rgba(255,127,50,.72) 0%,
      rgba(255,127,50,.58) 38%,
      rgba(255,127,50,.70) 100%
    ),
    url("/static/bocaboca/images/home/home.jpg") center/cover no-repeat;
}