/* =========================
   RESET & BASE
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', Arial, sans-serif;
}

body{
  background:#02040a;
  color:#ffffff;
  overflow-x:hidden;
}

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

.logo{
  width:90px;
  height:auto;
}

.navbar ul{
  list-style:none;
  display:flex;
  gap:25px;
}

.navbar a{
  color:#ffffff;
  text-decoration:none;
  font-size:15px;
  transition:color .3s;
}

.navbar a:hover{
  color:#00e0ff;
}

/* =========================
   SLIDE DE TRANSICIÓN
========================= */
.transition-slide {
  background-size:55%;
  background-repeat:no-repeat;
  background-position:center center;
}

/* =========================
   HERO / SLIDER
========================= */
.hero{
  position:relative;
  width:100%;
  height:110vh;
  padding-top:70px;          /* Compensa navbar fijo */
  box-sizing:border-box;
  overflow:hidden;
}

/* 🔑 CLAVE: las slides invisibles NO capturan clic */
.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1s ease-in-out;
  pointer-events:none;      /* 🔥 */
}

/* 🔑 SOLO la slide activa recibe clic */
.slide.active{
  opacity:1;
  pointer-events:auto;     /* 🔥 */
}

.overlay{
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* ← CAMBIO */
  justify-content:center;
  text-align:left;          /* ← CAMBIO */
  padding-left:10%;         /* ← CAMBIO */
  padding-right:20px;
}


.overlay h1{
  font-size:48px;
  margin-bottom:20px;
}

.overlay p{
  font-size:20px;
  margin-bottom:30px;
  color:#cfd6ff;
}

.hero-btns a{
  display:inline-block;
  margin:0 8px;
  padding:14px 32px;
  border-radius:30px;
  border:1px solid #00e0ff;
  color:#ffffff;
  text-decoration:none;
  transition:.3s;
}

.hero-btns a:hover{
  background:#00e0ff;
  color:#02040a;
}

/* =========================
   SERVICES
========================= */
.services{
  max-width:1000px;
  margin:auto;
margin-top:140px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:126px;   /* ← ESTE NÚMERO */
}



.card{
  background:#0a0f1c;
  border-radius:20px;
  overflow:hidden;
  transition:transform .3s;
}

.card:hover{
  transform:translateY(-8px);
}

.card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.card h3{
  padding:20px 20px 10px;
}

.card p{
  padding:0 20px 25px;
  color:#cfd6ff;
}

/* =========================
   CONTACT
========================= */
.contact{
  padding:80px 20px;
  text-align:center;
}

.contact h2{
  margin-bottom:20px;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
  .overlay h1{font-size:34px;}
  .overlay p{font-size:18px;}
  .navbar{padding:0 20px;}
}


/* ===== FIX DEFINITIVO LOGO ===== */
.navbar img.logo{
  height:150px !important;   /* prueba 70, 80 o 90 */
  width:auto !important;
  max-height:none !important;
}