/* Reset e base */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --brown-900:#2B1D17; /* quase preto */
  --brown-800:#3A261E;
  --brown-700:#4A2F24;
  --brown-600:#5B3A29;
  --brown-500:#7B4A2A; /* madeira */
  --brown-200:#E9D9CC;
  --gold-500:#C8A45D;
  --text:#2a2a2a;
  --muted:#6b6b6b;
  --bg:#f7f5f3;
  --white:#ffffff;
}

html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}

/* Util */
.container{max-width:1120px;margin:0 auto;padding:1rem}
.section{padding:3rem 0}
.section-alt{padding:3rem 0;background:linear-gradient(180deg, rgba(123,74,42,0.06), rgba(58,38,30,0.06))}
.section-title{font-size:1.6rem;margin-bottom:.75rem;color:var(--brown-700)}
.muted{color:var(--muted)}

/* Header */
.site-header{background:linear-gradient(180deg,var(--brown-900),var(--brown-800));color:#fff;position:sticky;top:0;z-index:50}
.header-content{display:flex;align-items:center;justify-content:space-between}
.logo img{height:48px;width:auto;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.nav a{color:#fff;text-decoration:none;margin-left:1rem;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}
.btn-nav{background:var(--gold-500);color:#000;padding:.5rem .85rem;border-radius:999px;margin-left:1rem}
.btn-nav:hover{background:#e0be77}

/* Hero com madeira */
.hero{color:#fff}
.hero-wood{
  background:
    linear-gradient( to right, rgba(43,29,23,.9), rgba(58,38,30,.7) ),
    url('../images/wood-texture.jpg'); /* opcional: textura de madeira */
  background-size:cover;
  background-position:center;
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:2.5rem 1rem}
.hero-copy h1{font-size:2.1rem;margin-bottom:.5rem}
.lead{font-size:1.15rem;margin-bottom:.75rem}
.price-old{text-decoration:line-through;opacity:.8}
.price-new{color:#FFD37A;background:rgba(0,0,0,.25);padding:.1rem .4rem;border-radius:.35rem;margin-left:.35rem}
.features{list-style:none;margin-top:.5rem;display:grid;gap:.35rem}
.cta-row{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.btn-cta{background:var(--gold-500);color:#1b120e;text-decoration:none;padding:.85rem 1.1rem;border-radius:.65rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.btn-cta:hover{background:#e0be77}
.btn-ghost{border:2px solid #ffffff80;color:#fff;text-decoration:none;padding:.8rem 1rem;border-radius:.65rem}
.btn-ghost:hover{background:#ffffff12}

/* Hero image */
.hero-figure img{width:100%;height:auto;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Galeria */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.gallery img{width:100%;height:auto;border-radius:12px;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.gallery img:hover{transform:scale(1.02);box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* Lightbox */
#lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000;align-items:center;justify-content:center}
#lightbox img{max-width:92%;max-height:84%;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#lightbox .close{position:absolute;top:20px;right:32px;color:#fff;font-size:40px;cursor:pointer}

/* Vídeo */
.video-container{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.18)}
.video-container iframe{position:absolute;inset:0;width:100%;height:100%}

/* Contato */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
.contact-form textarea{grid-column:1 / -1;min-height:140px}
.contact-form input, .contact-form textarea{padding:.85rem;border:1px solid #d7c9bc;border-radius:10px;background:#fff}
.contact-form button{grid-column:1 / -1}
#contato .btn-cta{background:var(--brown-500);color:#fff}
#contato .btn-cta:hover{background:var(--brown-600)}

/* Footers */
.footer-main{background:linear-gradient(180deg,#fff,#f3ede8);padding:2rem 0}
.footer-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.footer-brand{display:flex;align-items:center;gap:1rem}
.footer-logo{height:44px;width:auto}
.brand-name{font-weight:700;color:var(--brown-700)}
.social a{margin-left:1rem;color:var(--brown-700);text-decoration:none;display:inline-flex;gap:.35rem;align-items:center;opacity:.9}
.social a:hover{opacity:1}
.site-footer{background:var(--brown-900);padding:1rem 0;text-align:center}
.site-footer .credit{color:#ddd;font-size:.85rem}
.site-footer .credit a{color:#fff;text-decoration:none}
.site-footer .credit a:hover{text-decoration:underline}

/* Botão flutuante WhatsApp */
.wa-float{position:fixed;right:18px;bottom:18px;background:#25D366;border-radius:999px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:60}
.wa-float img{width:28px;height:28px;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}

/* Responsivo */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr;gap:1.25rem}
  .hero-figure{order:-1}
}
@media (max-width: 620px){
  .nav a{margin-left:.6rem}
  .btn-nav{display:none}
  .contact-form{grid-template-columns:1fr}
}

/* --- Cards gallery --- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Card */
.card{
  background: linear-gradient(180deg, #fff, #fbf9f7);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  outline: none;
}
.card:focus,
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
}

/* Media */
.card-media{width:100%;height:160px;overflow:hidden;display:block;background:#f0ebe6}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.card:hover .card-media img{transform:scale(1.03)}

/* Body */
.card-body{padding:0.95rem 1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-title{font-size:1.05rem;margin-bottom:0;color:var(--brown-700)}
.card-text{font-size:.92rem;color:var(--muted);flex:1}

/* Actions (botón) */
.card-actions{display:flex;justify-content:flex-end;align-items:center;margin-top:.5rem}
.btn-ghost.small{
  border:1.5px solid rgba(43,29,23,.08);
  padding:.45rem .7rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem;
  background:transparent;color:var(--brown-800)
}
.btn-ghost.small:hover{background:rgba(0,0,0,.04)}

/* make sure gallery images from older rule don't break cards */
.gallery img{height:auto}

/* Responsivity */
@media (max-width:620px){
  .card-media{height:140px}
  .card-body{padding:.8rem}
}