/* /css/style.css */
/* RESET & TOKENS */
:root{
  --bg:#071e12;--bg2:#0b1f14;--card:#0f2b1a;--brand:#20c05c;--brand2:#93e09f;
  --text:#eaf6ed;--muted:#a9cbb0;--radius:18px;--shadow:0 12px 36px rgba(0,0,0,.28);
  --container:1200px
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%,#0a2416 60%,var(--card) 100%);
  color:var(--text)
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--brand2);font-weight:700;font-size:.78rem}
.btn{display:inline-flex;gap:.6rem;align-items:center;justify-content:center;padding:.9rem 1.2rem;border-radius:999px;background:linear-gradient(90deg,var(--brand),#1db954);color:#0a2a17;font-weight:700;box-shadow:var(--shadow);border:none;cursor:pointer}
.btn.outline{background:transparent;border:1.5px solid var(--brand);color:var(--text)}
section{padding:72px 0}
.section-title{display:flex;align-items:center;gap:.8rem;margin-bottom:18px}
.section-title h1,.section-title h2{margin:0}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,30,18,.64);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem}
.logo{width:42px;height:42px;border-radius:12px;background:radial-gradient(120px 120px at 20% 20%,#2be477,#1aa84a 70%,#0b5327 100%);box-shadow:inset 0 0 20px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.35)}
.brand .name{font-weight:800;letter-spacing:.5px}
.menu{display:flex;gap:20px;align-items:center}
.menu a{opacity:.86}
.menu a:hover{opacity:1}
.menu a.active{opacity:1;color:var(--brand2)}
.menu-toggle{display:none}

/* HERO */
.hero{padding:86px 0 56px}
.grid-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(34px,6vw,54px);line-height:1.06;margin:0 0 12px}
.hero p{color:var(--muted);font-size:1.06rem;margin:0 0 24px}
.hero-illus{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,rgba(32,192,92,.15),rgba(6,23,13,.2));border:1px solid rgba(255,255,255,.06)}
.hero-illus img{aspect-ratio:4/3;object-fit:cover}

/* ABOUT */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.pill{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03)}
.pill strong{display:block;color:var(--brand2)}

/* CONTACT */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form input,form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0c2014;color:var(--text)}
form textarea{grid-column:1/3;min-height:120px;resize:vertical}

/* FOOTER */
footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15)}
.units{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.unit{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px}

/* RESPONSIVE */
@media (max-width: 980px){
  .menu{display:none}
  .menu-toggle{display:inline-flex}
  .grid-hero{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  form textarea{grid-column:auto}
  .units{grid-template-columns:1fr}
}

/* MOBILE DROPDOWN */
.mobile-menu{display:none;position:fixed;inset:64px 16px auto 16px;background:rgba(7,30,18,.96);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.mobile-menu a{display:block;padding:12px;border-radius:10px}
.mobile-menu a:hover{background:rgba(255,255,255,.06)}

/* UTIL */
.m-0{margin:0}
.text-muted{color:var(--muted)}

/* Seções */
.contato {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  background: #0d2d1c;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.contato h1 {
  text-align: center;
  margin-bottom: 20px;
}

.form-contato {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.form-contato input,
.form-contato textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.form-contato button {
  background: #2ecc71;
  color: #fff;
  font-size: 1rem;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.form-contato button:hover {
  background: #27ae60;
}

.info-contato {
  background: #123824;
  padding: 20px;
  border-radius: 8px;
}

.info-contato h2 {
  margin-bottom: 10px;
  color: #2ecc71;
}
/* ==== Modal (confirmação de envio) ==== */
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:1000}
.modal.show{display:grid}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal .card{
  position:relative;max-width:520px;width:92%;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);color:var(--text)
}
.modal .card h3{margin:0 0 6px}
.modal .card p{margin:0 0 16px;color:var(--muted)}
.modal .actions{display:flex;gap:10px;justify-content:center}

/* logo como imagem */
.logo-img{ height:42px; width:auto; border-radius:8px; display:block }

/* --- CORREÇÃO DO MENU MOBILE --- */
@media (max-width: 980px){
  /* o menu some por padrão no mobile */
  .menu{
    display:none;
    position:absolute;        /* vira dropdown */
    right:20px; top:64px;
    background:rgba(7,30,18,.96);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:10px;
    box-shadow:var(--shadow);
    flex-direction:column;
    gap:0;
    min-width:220px;
    z-index:60;
  }
  /* quando a classe .show é aplicada pelo JS, ele aparece */
  .menu.show{ display:flex; }
  .menu a{ padding:12px; border-radius:10px; }
  .menu a:hover{ background:rgba(255,255,255,.06); }
}
/* LOGO */
.logo-img {
  height: 48px;       /* altura ideal do logo no menu */
  width: auto;        /* mantém proporção */
  display: block;
}
@media (max-width: 768px){
  .logo-img { height: 36px; }
}
/* ===== Galeria ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery a{display:block;position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.gallery img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .3s ease}
.gallery a:hover img{transform:scale(1.03)}

.gallery .tag{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:999px;font-size:.75rem}

/* Modal/lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;place-items:center;z-index:1000}
.lb.show{display:grid}
.lb .inner{max-width:min(1100px,92vw);max-height:86vh}
.lb img{max-width:100%;max-height:86vh;border-radius:12px;display:block}
.lb .close,.lb .prev,.lb .next{
  position:fixed;top:20px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);
  color:#fff;padding:10px 14px;border-radius:999px;cursor:pointer
}
.lb .close{right:20px}
.lb .prev{left:20px;top:50%;transform:translateY(-50%)}
.lb .next{right:20px;top:50%;transform:translateY(-50%)}

/* Responsivo */
@media (max-width: 1100px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 780px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery img{height:180px} }
@media (max-width: 520px){ .gallery{grid-template-columns:1fr} .gallery img{height:200px} }