/* =======================
   MARCAS
======================= */
.projects{ padding:80px 40px; background:#0a0a0a; } .projects h2{ text-align:center; margin-bottom:10px; } .projects-subtitle{ text-align:center; color:#8a94a6; margin-bottom:50px; } .projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:25px; } .project-card{ background:#0f1319; border:1px solid rgba(37,99,235,.2); border-radius:20px; overflow:hidden; transition:.3s; } .project-card:hover{ transform:translateY(-5px); border-color:rgba(37,99,235,.6); } .project-carousel{ position:relative; height:240px; } .project-carousel img{ width:100%; height:100%; object-fit:cover; } .carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:white; cursor:pointer; } .prev{ left:10px; } .next{ right:10px; } .project-content{ padding:20px; text-align:left; } .project-location{ color:#60a5fa; font-size:14px; } .project-content h3{ margin:10px 0; } .project-content p{ color:#8a94a6; line-height:1.6; } body { margin: 0; font-family: Arial, sans-serif; background: #0a0a0a; color: white; } /* NAVBAR */ nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; border-bottom: 1px solid #222; } .overlay { position: absolute; inset: 0; /* Aplica un degradado: arriba 70% de opacidad y abajo 100% negro puro para fusionar */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 70%, #0a0a0a 100%); } .logo { display: flex; gap: 12px; align-items: center; } .logo img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; } .logo h1 { font-size: 18px; margin: 0; } .logo p { font-size: 12px; margin: 0; color: #aaa; } .btn { background: #2563eb; padding: 10px 18px; border-radius: 8px; color: white; text-decoration: none; font-weight: bold; } /* HERO (Corregido con flex y z-index) */ .hero { position: relative; height: 70vh; display: flex; align-items: center; padding: 40px; background: url("images/1.png") center/cover no-repeat; overflow: hidden; } /* OVERLAY MEJORADO (Difumina a negro puro abajo) */ .overlay { position: absolute; inset: 0; /* Degradado agresivo: arriba oscuro traslúcido, al 60% empieza a fundirse, al 100% es negro total */ background: linear-gradient( to bottom, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.8) 60%, #0a0a0a 100% ); z-index: 1; /* Se asegura de estar sobre la imagen */ } /* CONTENIDO DEL HERO (Para que no quede abajo del overlay) */ .hero-content { position: relative; max-width: 750px; z-index: 2; /* Pasa al frente para que el texto sea legible y los botones clickeables */ } .hero-content span { color: #60a5fa; font-weight: bold; } .hero-content h2 { font-size: 48px; margin: 15px 0; } .hero-content p { color: #ccc; font-size: 18px; } .buttons { margin-top: 25px; display: flex; gap: 15px; flex-wrap: wrap; } .primary { background: #2563eb; padding: 12px 20px; border-radius: 10px; color: white; text-decoration: none; font-weight: bold; } .secondary { border: 1px solid #555; padding: 12px 20px; border-radius: 10px; color: white; text-decoration: none; } /* SERVICIOS */ section { padding: 80px 40px; text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px; } /* NUEVO ESTILO DE LAS CARDS (Basado en tu referencia) */ .card { background: #0f1319; padding: 16px; border-radius: 20px; border: 1px solid rgba(37, 99, 235, 0.2); /* Borde sutil azul */ text-align: left; /* Todo alineado a la izquierda */ position: relative; transition: transform 0.3s ease, border-color 0.3s ease; } .card:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, 0.6); /* Resalta el azul al pasar el mouse */ } .card-img-container { position: relative; width: 100%; height: 160px; margin-bottom: 30px; /* Espacio para que el icono flote bien */ } .card img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } /* Icono flotante azul */ .card-icon { position: absolute; bottom: -20px; left: 15px; background: #0046c7; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .card-icon i { color: white; font-size: 18px; } .card h3 { font-size: 20px; margin: 10px 0 8px 0; font-weight: bold; } /* Línea decorativa azul debajo del título */ .card-line { width: 35px; height: 2px; background: #2563eb; margin-bottom: 15px; } .card p { color: #8a94a6; font-size: 13.5px; line-height: 1.5; margin: 0; } /* ABOUT */ .about { background: #111; } /* CTA */ .cta { background: #2563eb; } .cta a { display: inline-block; margin-top: 20px; background: white; color: black; padding: 12px 20px; border-radius: 10px; text-decoration: none; font-weight: bold; } /* FOOTER */ footer { padding: 30px; text-align: center; border-top: 1px solid #222; color: #888; } 
.brands{
  padding:80px 0;
  background:#0d1117;
  overflow:hidden;
}

.brands h2{
  text-align:center;
  margin-bottom:10px;
}

.brands p{
  text-align:center;
  color:#8a94a6;
  margin-bottom:50px;
}

.brands-slider{
  overflow:hidden;
  width:100%;
}

.brands-track{
  display:flex;
  gap:25px;
  width:max-content;
  animation:scrollBrands 40s linear infinite;
}

.brand-card{
  min-width:220px;
  background:#111827;
  border:1px solid rgba(37,99,235,.2);
  border-radius:18px;
  overflow:hidden;
}

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

.brand-card span{
  display:block;
  text-align:center;
  padding:15px;
  font-weight:bold;
}

@keyframes scrollBrands{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}
/* ==========================
   PROCESO
========================== */

.process{
    padding:90px 8%;
    background:#0d1117;
    text-align:center;
}

.process h2{
    color:#fff;
    font-size:42px;
    margin-bottom:15px;
}

.process-subtitle{
    color:#9ca3af;
    margin-bottom:60px;
    font-size:18px;
}

.process-container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.process-card{
    width:300px;
    background:#111827;
    border:1px solid #1e3a8a;
    border-radius:22px;
    padding:75px 30px 35px;
    position:relative;
    transition:.35s ease;
    overflow:hidden;
}

.process-card:hover{
    transform:translateY(-8px);
    border-color:#3b82f6;
    box-shadow:0 15px 40px rgba(59,130,246,.20);
}

.process-card.active{
    background:#1d4ed8;
    border-color:#3b82f6;
}

.process-icon{
    position:absolute;
    left:50%;
    top:-42px;
    transform:translateX(-50%);
    width:84px;
    height:84px;
    border-radius:50%;
    background:#0f172a;
    border:3px solid #3b82f6;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    color:#60a5fa;
    transition:.3s;
}

.process-card:hover .process-icon{
    transform:translateX(-50%) scale(1.08);
}

.process-card.active .process-icon{
    background:#fff;
    color:#1d4ed8;
}

.process-card h3{
    color:#fff;
    font-size:30px;
    margin-bottom:20px;
}

.process-card{
    background:#111827;
    border:1px solid #1e3a8a;
    border-radius:22px;
    padding:85px 30px 35px;
    position:relative;
    overflow:visible;
}

.process-icon{
    top:-25px;
}

.process-arrow{
    display:none;

}
.process-card{
    position:relative;
}

.process-card:not(:last-child)::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-50px;
    transform:translateX(-50%);
    width:3px;
    height:35px;
    background:#3b82f6;
}

@media(max-width:900px){

    .process-container{
        flex-direction:column;
        gap:50px;
    }

    .process-arrow{
        transform:rotate(90deg);
    }

    .process-card{
        width:100%;
        max-width:340px;
    }
}