:root{
  --accent:#d39f00;
  --bg:#ffffff;
  --muted:#f1f1f1;
  --card-bg:#111;
  --gap:12px;
  --glass: rgba(0,0,0,0.28);
  --panel-bg: rgba(12,12,12,0.9);
  --meta-bg: rgba(0,0,0,0.55);
  --whatsapp:#25D366;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body,html{height:100%;margin:0;color:#222;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* Poster: use the --vh unit to avoid mobile viewport issues */
.poster{
  min-height:calc(var(--vh, 1vh) * 100);
  height:calc(var(--vh, 1vh) * 100);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.poster-overlay{
  background:linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  width:100%;
  max-width:1200px;
  padding:40px 16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-height:100%;
  overflow:auto;
}
.poster-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;font-weight:700;transition:transform .12s ease,box-shadow .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#000}
.btn-whatsapp{background:var(--whatsapp);color:#fff}
.poster-caption{margin-top:12px;color:#fff;font-weight:600}
.whatsapp-floating{position:fixed;right:16px;bottom:16px;background:var(--whatsapp);color:#000;padding:10px 14px;border-radius:30px;box-shadow:0 6px 20px rgba(0,0,0,.2);font-weight:700}

.site-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#000;color:var(--muted)}
.logo{font-weight:700}

.container{max-width:1200px;margin:28px auto;padding:0 16px}

/* Filters */
.filters{display:flex;gap:12px;margin-bottom:16px;align-items:center}
.filters select,.filters input{padding:10px 12px;border-radius:8px;background:#0f0f0f;color:#fff;border:1px solid #222;min-width:160px;box-shadow:inset 0 -2px 0 rgba(255,255,255,0.02)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.card{background:#0f0f0f;padding:14px;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.card h3{margin:8px 0 4px;font-size:1.05rem;color:#f5f2ef}
.card p{margin:0;color:#cfcfcf;font-size:.92rem}
.card p.muted{color:#bdbdbd;font-size:.85rem}
.price{margin-top:8px;font-weight:800;color:var(--accent);font-size:1rem}

.site-footer{margin-top:36px;padding:28px;background:#111;color:#ddd;border-top:4px solid rgba(0,0,0,0.06)}
.site-footer iframe{width:100%;height:200px;border:0;margin-top:10px;border-radius:8px}

/* product page layout */
.product-row{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
@media (max-width:980px){
  .product-row{grid-template-columns:1fr;}
}

.carousel{display:flex;flex-direction:column;gap:12px}
.carousel-main{background:#000;border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center}
.carousel-main img, .carousel-main video{width:100%;height:480px;object-fit:contain;border-radius:8px;background:#111}
.thumbs{display:flex;gap:10px;margin-top:6px;overflow:auto}
.thumb{width:96px;height:72px;flex:0 0 auto;border-radius:8px;overflow:hidden;border:2px solid transparent;transition:transform .12s ease,border-color .12s ease}
.thumb img, .thumb video{width:100%;height:100%;object-fit:cover}
.thumb:hover{transform:translateY(-4px);border-color:rgba(0,0,0,0.12)}
.thumb.selected{border-color:var(--accent)}

.meta{margin-top:0;background:var(--meta-bg);padding:20px;border-radius:12px;color:#fff}
.meta h2{margin:0 0 8px;color:#fff;opacity:1;font-size:1.5rem;font-weight:800}
.meta p.description{color:#f2f2f2;font-size:1rem;line-height:1.7;margin-bottom:12px}
.caption{color:#e7e5e3;font-style:italic;margin-top:6px}

.meta .specs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.select{appearance:none;padding:10px 12px;border-radius:8px;background:#0b0b0b;color:#fff;border:1px solid rgba(255,255,255,0.06);min-width:120px}

.price-box{margin-top:14px;padding:12px 14px;border-radius:10px;background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));display:flex;align-items:center;justify-content:space-between}
.price-box .price-label{color:#ffd07a;font-weight:800}

.btn-large{display:inline-block;padding:14px 18px;border-radius:10px;background:var(--whatsapp);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 8px 20px rgba(37,211,102,0.18)}
.btn-large:active{transform:translateY(1px)}

/* small screens tweaks */
@media (max-width:600px){
  .carousel-main img, .carousel-main video{height:280px}
  .poster-overlay{padding:20px}
  .filters{flex-direction:column;align-items:stretch}
  .meta h2{font-size:1.25rem}
  .meta p.description{font-size:0.98rem}
  .price-box{flex-direction:column;align-items:flex-start;gap:8px}
}