:root {
  --black: #0e0e0e;
  --gray: #3d3d3d;
  --light-gray: #d1d1d1;
  --yellow: #f4c430;
  --white: #f9f9f9;
  --dark-bg: #0b0b0b;
  --gold: #d4af37;
  --gold-gradient: linear-gradient(90deg, #d4af37, #f9d976);
  --text-light: #e0e0e0;
  --transition: all 0.4s ease;
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Roboto', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* NAVBAR */
.navbar {
  position: fixed; top:0; left:0; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 3rem;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  z-index:1000;
}

.nav-logo { font-family:'Poppins', sans-serif; font-size:1.8rem; font-weight:600; color:var(--yellow); }

.nav-links { display:flex; gap:2rem; list-style:none; }

.nav-links a { color:var(--light-gray); text-decoration:none; font-weight:bold; text-transform:uppercase; transition:color 0.3s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color:var(--yellow); outline:none; }

/* MENU BTN */
.menu-btn {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 22px;
  position: relative;
  z-index: 1001;
}
.menu-btn .bar {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--yellow);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
}
.menu-btn.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-btn.active .bar:nth-child(2) {
  opacity: 0;
}
.menu-btn.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* HERO */
.hero { 
  position: relative; 
  height: 100vh; 
  width: 100%; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.hero-logo { 
  max-width: 100%;         /* ancho máximo para que no sobresalga */
  max-height: 100%;        /* altura máxima para no ocupar todo */
  object-fit: contain;    /* mantiene proporción */
  filter: brightness(0.6) drop-shadow(0 0 20px rgba(0,0,0,0.6)); 
  z-index: 1; 
}

.overlay { 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%); 
  z-index: 2; 
}

/* SECTIONS */
section { padding:5rem 2rem; text-align:center; }
h2 { font-family:'Poppins', sans-serif; font-size:2.5rem; color:var(--yellow); margin-bottom:0.5rem; }
.line { width:80px; height:4px; background:var(--yellow); margin:0 auto 2rem; border-radius:2px; }
.about p, .contact p { max-width:800px; margin:0 auto; color:var(--light-gray); line-height:1.7; font-size:1.1rem; }

/* SERVICES */
.service-container { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:3rem; }
.card { width:300px; background:var(--gray); border-radius:10px; overflow:hidden; transition:all 0.4s ease; }
.card:hover, .card:focus-within { transform:translateY(-10px); background:var(--yellow); color:var(--black); }
.card:hover h3, .card:hover p, .card:focus-within h3, .card:focus-within p { color:var(--black); }
.card-image { height:280px; background-size:cover; background-position:center; }
.img-1{background-image:url('img/importacion.jpg');} .img-2{background-image:url('img/alquiler.jpg');} .img-3{background-image:url('img/servicio\ tecnico.jpg');}
.card h3 { font-family:'Poppins', sans-serif; margin:1rem 0; }
.card p { padding:0 1rem 1.5rem; font-size:0.95rem; line-height:1.5; }

/* GALLERY */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin-top:2rem; }
.gallery-grid img { width:100%; height:250px; object-fit:cover; border-radius:10px; transition:transform 0.3s ease; }
.gallery-grid img:hover, .gallery-grid img:focus { transform:scale(1.05); outline:none; }

/* CONTACT */
.social-links a { color:var(--yellow); font-size:2rem; margin:0 10px; transition:color 0.3s ease; }
.social-links a:hover, .social-links a:focus { color:var(--white); outline:none; }

/* FOOTER */
footer { background:var(--gray); color:var(--light-gray); text-align:center; padding:1.5rem 0; font-size:0.9rem; }

/* RESPONSIVE */
@media(max-width:768px){
  .nav-links { position:fixed; top:0; right:-100%; height:100vh; width:70%; background:rgba(0,0,0,0.95); flex-direction:column; justify-content:center; align-items:center; transition:right 0.4s ease-in-out; z-index:999; }
  .nav-links.mobile-menu { right:0; }
  .menu-btn { display:block; }
  .service-container { flex-direction:column; align-items:center; }
}