/* === STYLES.CSS LIMPO E AJUSTADO === */

/* Variáveis CSS para controle de altura */
:root {
  --headerH-desktop: 76px;
  --headerH-mobile: 56px;
}

/* Galeria de projetos: imagens proporcionais */
.gallery .card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  display: block;
}

/* Cor marrom para o menu principal */
.main-nav a, .main-nav a:visited, .main-nav a:not(.btn), .main-nav a:not(.btn):hover, .main-nav a:not(.btn):active {
  color: #7c4a1e !important;
}
.main-nav a.btn {
  background: #7c4a1e;
  color: #fff !important;
  border-color: #7c4a1e;
}
.main-nav a.btn.outline {
  background: #fff;
  color: #7c4a1e !important;
  border-color: #7c4a1e;
}

/* Base: menu mobile começa escondido em qualquer largura */
.mobile-menu { display: none; }

/* Topbar "glassy" e hover sublinhado elegante */
.topbar {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  min-height: var(--headerH-desktop);
  display: flex;
  align-items: center;
  backdrop-filter: saturate(150%) blur(8px);
  background: color-mix(in oklab, white 62%, transparent);
  border-bottom: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  transition: background .3s, box-shadow .3s;
}

.main-nav a {
  position: relative;
  text-decoration: none;
}
.main-nav a:not(.btn)::after {
  content:"";
  position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:#0c4a6e; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.main-nav a:not(.btn):hover::after { transform:scaleX(1); }

/* Botão do menu (hamburger) com área maior de toque */
.menu-toggle {
  border-radius:12px;
  padding:.35rem;
  background:none;
  border:none;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
}

/* Mobile menu com "sheet" mais caprichado */
@media (max-width:780px){
  .mobile-menu{
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border: 1px solid #e5e7eb;
  }
  .mobile-menu a{
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, transform .08s;
  }
  .mobile-menu a:hover{
    background: #f1f5f9;
    border-color: #e2e8f0;
  }
}

/* Menu mobile: logotipo centralizado, ícone à direita, submenu */
@media (max-width:780px){
  .topbar{
    min-height: var(--headerH-mobile, 56px) !important;
  }
  .topbar .mainmenu{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.8rem 1rem !important;
    min-height: 56px !important;
    position: relative !important;
    width: 100% !important;
  }
  .topbar .brand.center-logo{
    display: flex !important;
    align-items: center !important;
    z-index: 5 !important;
    position: static !important;
    transform: none !important;
  }
  .topbar .brand.center-logo img{
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: -12px 0 !important;
  }
  .topbar .menu-toggle{
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    padding: .5rem !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
  }
  .topbar .main-nav{ display: none !important; }
  .topbar .mobile-menu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    display: none;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 1rem .75rem;
    z-index: 30 !important;
  }
  .topbar .mobile-menu.open{ display: flex !important; }
  .topbar .mobile-menu a{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: .6rem 0 !important;
  }
}

/* Reset básico e tipografia */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#fff}
img{max-width:100%;display:block;height:auto}
a{color:#0c4a6e;text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1120px,92%);margin-inline:auto}
.flex{display:flex;gap:1rem}
.between{justify-content:space-between}
.center{align-items:center}
.top{align-items:flex-start}

.grid{display:grid;gap:2rem}
.grid.two{grid-template-columns:1.1fr 0.9fr}
.grid.three{grid-template-columns:repeat(3,1fr)}

.btn {
  display: inline-block;
  background: #7c4a1e;
  color: #fff;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: background .2s, color .2s;
}
.btn:hover {
  text-decoration: none;
  filter: brightness(1.05);
  background: #633816;
}
.btn.outline {
  background: #fff;
  color: #7c4a1e;
  border-color: #7c4a1e;
}
.btn.small {
  padding: .5rem .9rem;
  font-size: .95rem;
}

.topbar .brand{display:flex;align-items:center;gap:.6rem;font-weight:700}

.mainmenu {
  padding: 0.3rem 0;
  width: auto;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
}

.main-nav {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
}

.main-nav a{font-weight:600;font-size:1.2rem;transition:color .2s;}
.main-nav a.btn{margin-left:1.2rem;font-size:1.1rem;padding:.9rem 1.4rem;}
.main-nav a:not(.btn):hover{color:#0c4a6e;text-decoration:underline;}

/* GERAL */
body {
  padding-top: 0 !important; /* sempre zero, sticky já empurra */
}

.section{padding:clamp(2rem,4vw+1rem,5rem) 0}
.section.alt{background:#f8fafc}
.section-head h2{margin:0;font-size:clamp(1.6rem,2vw+1rem,2.2rem)}
.section-head p{color:#475569}

.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:1.2rem;box-shadow:0 2px 10px rgba(0,0,0,.05)}

.gallery figcaption{padding:.6rem;color:#475569;font-size:.95rem}

.contact .contact-list{list-style:none;padding:0;margin:0 0 1rem;color:#334155}
.contact label{display:block;margin:.6rem 0;font-weight:600}
.contact input,.contact textarea{width:100%;margin-top:.35rem;padding:.75rem .9rem;border-radius:12px;border:1px solid #cbd5e1;font:inherit}

.footer {
  background: linear-gradient(rgba(30,23,10,0.92),rgba(30,23,10,0.97)), url('/assets/hero-madeiras-serradas2.webp') center/cover no-repeat;
  color: #f3e9e0;
  padding: 2rem 0;
}
.footer a { color: #f3e9e0; }
.footer .brand span { color: #fff; }
.footer .brand img {
  filter: brightness(0) invert(1) grayscale(1) contrast(1.2);
}

.floating-whatsapp{position:fixed;right:1rem;bottom:1rem;background:#25D366;color:#0b1220;padding:.8rem 1rem;border-radius:999px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* HERO CAROUSEL */
.hero-carousel {
  position: relative;
  overflow: hidden;
  margin-top: var(--headerH-desktop);
}

.hero-carousel .slides {
  position: relative;
  height: 62vh;
  min-height: 420px;
}

.hero-carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

.hero-carousel .slide.is-active { opacity: 1; }

.hero-carousel picture, .hero-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carousel .overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,rgba(0,0,0,0.32) 0%,rgba(0,0,0,0.44) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  color: #fff;
}

.hero-carousel .overlay > * {
  margin-left: 8vw;
  margin-right: auto;
  max-width: 600px;
}

.hero-carousel h1, .hero-carousel h2 {
  font-size: clamp(2.1rem, 4vw + 1rem, 3.2rem);
  line-height: 1.12;
  margin-bottom: 0.5rem;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.18);
}

.hero-carousel p {
  font-size: clamp(1.1rem, 1.5vw + 0.7rem, 1.5rem);
  margin-bottom: 1.1rem;
  color: #f3e9e0;
  text-shadow: 0 2px 16px rgba(0,0,0,.18);
}

.hero-carousel .cta-row {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.hero-carousel .cta-row .btn {
  background: #7c4a1e;
  color: #fff !important;
  border-color: #7c4a1e;
}
.hero-carousel .cta-row .btn.outline {
  background: #fff;
  color: #7c4a1e !important;
  border-color: #7c4a1e;
}

@media (max-width: 900px) {
  .hero-carousel .overlay > * {
    margin-left: 4vw;
    max-width: 95vw;
  }

  .hero-carousel h1, .hero-carousel h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 780px) {
  .hero-carousel {
    margin-top: var(--headerH-mobile) !important;
  }

  .hero-carousel .slides {
    height: 38vh;
    min-height: 220px;
    max-height: 340px;
  }

  .hero-carousel .overlay {
    padding: 0;
    background: linear-gradient(180deg,rgba(0,0,0,0.36) 0%,rgba(0,0,0,0.52) 100%) !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  .hero-carousel .overlay > * {
    margin-left: 4vw;
    margin-right: 4vw;
    max-width: 95vw;
  }

  .hero-carousel h1, .hero-carousel h2 {
    font-size: 1.18rem !important;
    line-height: 1.18;
    margin-bottom: 0.35rem;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.18);
  }

  .hero-carousel p {
    font-size: 0.98rem !important;
    margin-bottom: 0.7rem;
    color: #f3e9e0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.18);
  }

  .hero-carousel .cta-row {
    gap: 0.6rem;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.5rem;
  }

  .hero-carousel .cta-row .btn,
  .hero-carousel .cta-row .btn.outline {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    min-width: 0;
    border-radius: 999px;
    margin-bottom: 0.2rem;
  }
}

.hero-carousel .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer}
.hero-carousel .nav:hover{background:rgba(0,0,0,.6)}
.hero-carousel .prev{left:14px}
.hero-carousel .next{right:14px}
.hero-carousel .dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:.5rem;justify-content:center}
.hero-carousel .dots button{width:14px;height:14px;margin:0 6px;border-radius:50%;border:0;background:rgba(255,255,255,.6);cursor:pointer;padding:14px;background-clip:content-box}
.hero-carousel .dots button.active{background:#fff}

@media (max-width: 780px) {
  .hero-carousel .nav {
    width: 36px;
    height: 36px;
    top: auto;
    bottom: 18px;
    transform: none;
  }
  .hero-carousel .prev { left: 10px; }
  .hero-carousel .next { right: 10px; }
  .hero-carousel .dots { bottom: 8px; }
  .hero-carousel .dots button{ width:20px; height:20px; margin:0 8px; padding:14px; }
}

/* Responsive */
@media (max-width: 960px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
}

/* Mobile Call Button */
.mobile-call{
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: none;
  text-align: center;
  padding: .9rem 1rem;
  border-radius: 999px;
  background: #10b981; /* emerald */
  color: #0b1220;
  font-weight: 800;
  z-index: 60;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.mobile-call:hover{ text-decoration: none; filter: brightness(1.05); }

@media (max-width: 780px){
  .mobile-call{ display:block; }
  /* Lift WhatsApp FAB so it doesn't overlap the call button */
  .floating-whatsapp{ bottom: 4.2rem; }
}

/* Typography polish */
:root{
  --title: clamp(1.8rem, 2.2vw + 1rem, 2.4rem);
  --subtitle: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);
}
h1,h2,h3 { letter-spacing: .2px; }
.section-head{ margin-bottom: 1.2rem; }
.section-head h2{ font-size: var(--title); margin-bottom: .25rem; }
.section-head p{ font-size: var(--subtitle); color:#55637a; margin-top:.35rem; }

/* Space fix under carousel */
#produtos{ padding-top: clamp(3rem, 6vw, 5rem); }

/* Product cards with image - efeito e texto sobre imagem */
.product-grid .product {
  padding: 0;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 6px 26px rgba(2,6,23,.10);
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: cardFadeIn .8s cubic-bezier(.4,1.4,.6,1) forwards;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

.product-grid .product:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(2,6,23,.15);
}
.product-grid .product:nth-child(1) { animation-delay: 0.05s; }
.product-grid .product:nth-child(2) { animation-delay: 0.15s; }
.product-grid .product:nth-child(3) { animation-delay: 0.25s; }
.product-grid .product:nth-child(4) { animation-delay: 0.35s; }
.product-grid .product:nth-child(5) { animation-delay: 0.45s; }
.product-grid .product:nth-child(6) { animation-delay: 0.55s; }

@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.product-grid .product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}

.product-grid .product .p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  background: linear-gradient(180deg,rgba(0,0,0,.38) 60%,rgba(0,0,0,.68) 100%);
  padding: 1.1rem 1.2rem 1.2rem 1.2rem;
  text-align: left;
  z-index: 2;
  border-radius: 0 0 20px 20px;
  min-height: 38%;
  transition: background .3s ease;
}

.product-grid .product:hover .p {
  background: linear-gradient(180deg,rgba(0,0,0,.45) 60%,rgba(0,0,0,.75) 100%);
}
.product-grid .product h3 {
  margin: .2rem 0 .25rem;
  font-size: 1.25rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.product-grid .product p {
  color: #e5e7eb;
  font-size: 1.05rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
  margin: 0;
}

/* Nicer shadows and rounded corners */
.card{ border-radius:20px; box-shadow: 0 6px 26px rgba(2,6,23,.06); border:1px solid #e5e7eb; }

/* Mobile action bar */
.mobile-bar{
  position: fixed; left:0; right:0; bottom:0;
  display:none; gap:.6rem; padding:.6rem;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-top:1px solid #e5e7eb; z-index:70;
}
.mobile-bar a{
  flex:1; text-align:center; padding:.85rem 1rem; border-radius:12px; font-weight:800;
}
.mobile-bar .call{ background:#10b981; color:#0b1220; }
.mobile-bar .wa{ background:#25D366; color:#0b1220; }
@media (max-width: 780px){
  .mobile-bar{ display:flex; }
  .floating-whatsapp{ display:none; } /* hide floating FAB when bottom bar visible */
  .mobile-call{ display:none; } /* old single button hidden */
}

#projetos{ margin-top: clamp(3.5rem, 6vw, 5.5rem); }

/* === HOTFIX: header rente ao carrossel, cores e mobile menu === */

/* 1) Header e carrossel sem buraco */
body{ padding-top: 0 !important; }
.hero-carousel{ margin-top: 0 !important; }

/* 2) Deixe o header realmente no topo por cima do carrossel */
.topbar{
  position: sticky !important;  /* ou fixed, se preferir fixo */
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in oklab, white 62%, transparent) !important; /* translúcido */
}

/* 3) Textos do carrossel: garantir branco (evita "ficar azul") */
.hero-carousel .overlay h1,
.hero-carousel .overlay h2,
.hero-carousel .overlay p{
  color: #fff !important;
}

/* 4) Header mobile: 3 colunas (hambúrguer | logo | espaço/CTA) */
@media (max-width:780px){
  .mainmenu{
    display: grid !important;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    gap: 0;
    min-height: 56px;
  }
  .menu-toggle{
    grid-column: 1;
    justify-self: start;
    display: flex !important;
  }
  .brand.center-logo{
    grid-column: 2;
    justify-self: center;
    position: static !important;   /* remove o absolute */
    transform: none !important;
    max-width: 120px; max-height: 52px;
    display: flex; align-items: center;
  }
  .main-nav{ display: none !important; }   /* menu desktop some no mobile */
  .mobile-menu{ display: none; }           /* aberto via JS ao clicar */
  /* toque maior e ícone sempre visível */
  .menu-toggle svg{ width:32px; height:32px; }
}

/* 5) Desktop: logo maior e menu otimizado */
@media (min-width:781px){
  .mainmenu{ max-width: 960px !important; margin: 0 auto !important; }
  .topbar{
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: visible !important;
  }
  .topbar .brand{
    position: relative;
    z-index: 10;
    font-size: 1.1rem;
  }
  .topbar .brand img{
    height: 120px !important;
    width: auto !important;
    max-height: 120px !important;
    margin-top: -20px;
    margin-bottom: -20px;
  }
}

/* === HERO – ajustes mobile === */
@media (max-width: 780px){
  /* remove dots no mobile */
  .hero-carousel .dots{ display:none !important; }

  /* setas no centro vertical - sobrescreve regras anteriores */
  .hero-carousel .nav{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.35) !important;
    color: #fff !important;
    border: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-carousel .nav.prev{ left: 8px !important; }
  .hero-carousel .nav.next{ right: 8px !important; }
  .hero-carousel .nav:hover{ background: rgba(0,0,0,.55) !important; }
  .hero-carousel .nav:focus{ outline: none; box-shadow: 0 0 0 3px rgba(123,78,39,.35); }
}

/* desktop: dots visíveis e alvo de clique maior */
@media (min-width: 781px){
  .hero-carousel .dots{ display: flex !important; }
  .hero-carousel .dots button{
    width: 16px !important;
    height: 16px !important;
    margin: 0 6px !important;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 14px !important;
    background-clip: content-box !important;
  }
}