:root{
  --gr-red:#D32F2F;
  --gr-black:#212121;
  --wa-green:#25D366;
  --wa-green-dark:#1ea855;
}

*{ -webkit-font-smoothing:antialiased; }

html{ scroll-behavior:smooth; }
body{ font-family:'Roboto', sans-serif; color:#212121; }

.font-display{ font-family:'Montserrat', sans-serif; letter-spacing:-0.01em; }

.bg-gr-red{ background-color:var(--gr-red); }
.bg-gr-black{ background-color:var(--gr-black); }
.bg-wa-green{ background-color:var(--wa-green); }
.bg-wa-green-dark{ background-color:var(--wa-green-dark); }
.text-gr-red{ color:var(--gr-red); }
.text-gr-black{ color:var(--gr-black); }
.text-wa-green{ color:var(--wa-green); }
.border-gr-red{ border-color:var(--gr-red); }
.hover\:bg-wa-green-dark:hover{ background-color:var(--wa-green-dark); }
.hover\:text-gr-red:hover{ color:var(--gr-red); }

.hero-bg{
  background-image:url('assets/602f7e7b821b476a_WhatsApp_Image_2026-05-09_at_12.11.07.jpeg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(33,33,33,0.92) 0%, rgba(33,33,33,0.75) 45%, rgba(211,47,47,0.45) 100%);
}

.cta-whatsapp{
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:0 10px 30px -5px rgba(37,211,102,0.6);
}
.cta-whatsapp:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px -5px rgba(37,211,102,0.8);
}
.cta-whatsapp::after{
  content:''; position:absolute; inset:0; border:2px solid rgba(255,255,255,0.3);
  pointer-events:none;
}

.service-card{
  border:1px solid rgba(33,33,33,0.1);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 50px -15px rgba(0,0,0,0.3);
}

.reason-card{
  position:relative;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  border-left:4px solid var(--gr-red);
  padding:2.5rem 2rem;
  transition:background .3s, transform .3s;
}
.reason-card:hover{
  background:rgba(211,47,47,0.08);
  transform:translateY(-4px);
}
.reason-num{
  position:absolute; top:1.25rem; right:1.5rem;
  font-family:'Montserrat', sans-serif;
  font-weight:900; font-size:3rem;
  color:rgba(255,255,255,0.07);
  line-height:1;
}

.diagonal-stripes{
  background-image:repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 20px);
}

.gallery-item{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  background:#212121;
  cursor:pointer;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease, filter .4s;
  filter:saturate(0.9);
}
.gallery-item:hover img{
  transform:scale(1.08);
  filter:saturate(1.1);
}
.gallery-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(33,33,33,0.85) 100%);
  opacity:0; transition:opacity .3s;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-label{
  position:absolute; left:1rem; bottom:1rem; right:1rem;
  color:#fff; font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.1em;
  transform:translateY(8px); opacity:0;
  transition:all .3s ease;
  z-index:2;
}
.gallery-item:hover .gallery-label{
  transform:translateY(0); opacity:1;
}
.gallery-item.tall{ aspect-ratio:1/1.4; }
.gallery-item.wide{ aspect-ratio:1.4/1; }

.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  transition:all .25s ease;
}
.social-btn:hover{
  background:var(--gr-red);
  border-color:var(--gr-red);
  transform:translateY(-2px);
}

.float-whatsapp{
  animation:pulse-wa 2s infinite;
}
@keyframes pulse-wa{
  0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,0.6); }
  50%{ box-shadow:0 0 0 18px rgba(37,211,102,0); }
}

.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,0.95);
  display:none; align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:90vw; max-height:85vh; object-fit:contain;
}
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem;
  color:#fff; background:var(--gr-red); border:none;
  width:48px; height:48px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.fade-in{ opacity:0; transform:translateY(30px); transition:all .8s ease; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

@media (max-width:768px){
  .hero-bg{ background-attachment:scroll; }
}

/* CATÁLOGO DE ÁRIDOS */

.catalogo-item:hover .overlay {
    opacity:1;
}