Pequeños ajustes de los card

Author: SebiGitHub

assets/css/styles.css

@@ -22,7 +22,7 @@ html,body{ margin:0; }
 html{ scroll-behavior:smooth; }
 
 body{
-  background: url("../img/bg-hero.png") center/cover fixed no-repeat;
+  background:#070814;
   color: var(--text);
   font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
 }
@@ -38,10 +38,16 @@ body::before{
   inset: 0;
   pointer-events: none;
   z-index: 0;
-  background: rgba(5,6,21,.72); /* oscurece para legibilidad */
+
+  background:
+    radial-gradient(900px 700px at 20% 15%, rgba(124,58,237,.32), transparent 60%),
+    radial-gradient(900px 700px at 80% 25%, rgba(236,72,153,.20), transparent 60%),
+    radial-gradient(900px 700px at 60% 85%, rgba(34,211,238,.18), transparent 65%),
+    linear-gradient(180deg, #050615 0%, #07081a 55%, #050615 100%);
 }
 
 
+
 /* Spotlight reducido (≈ 1/4 del tamaño original) */
 body::after{
   content:"";
@@ -105,6 +111,17 @@ p{ color: var(--muted); line-height:1.7; }
   align-items:center;
 }
 
+.nav nav a.btn:hover{
+  color: #ffffff;
+}
+
+.nav nav a.btn{
+  padding: 10px 14px;
+  border-radius: 12px;
+  color: #0b0f14;
+  font-weight: 800;
+}
+
 .nav .nav-btn{
   padding: 8px 12px;
   font-size: 14px;
@@ -247,48 +264,51 @@ p{ color: var(--muted); line-height:1.7; }
    ========================= */
 .card{
   position: relative;
-  overflow:hidden;
+  overflow: hidden;
 
   border-radius: var(--radius);
-  padding:18px;
-  border:1px solid rgba(255,255,255,.08);
-  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
+  padding: 18px;
+
+  /* Fondo menos transparente */
+  background: rgba(10, 12, 28, 0.82);
+
+  /* borde base (fallback) */
+  border: 1px solid rgba(255,255,255,.14);
 
   transition: transform .2s ease, box-shadow .2s ease;
 }
 
-/* Borde glow al hover */
+/* Borde gradiente más grueso */
 .card::before{
   content:"";
   position:absolute;
-  inset:-2px;
+  inset:-2px; /* grosor del borde */
   border-radius: calc(var(--radius) + 2px);
-  background: linear-gradient(90deg,
-    rgba(124,58,237,.35),
-    rgba(34,211,238,.25),
-    rgba(124,58,237,.35)
-  );
-  opacity:0;
-  transition: opacity .25s ease;
+  background: linear-gradient(90deg, rgba(124,58,237,.65), rgba(34,211,238,.55), rgba(236,72,153,.55));
+  opacity: .65;
 }
 
-/* Capa interior para “separar” el borde glow */
+/* Capa interior para que se vea como “borde” real */
 .card::after{
   content:"";
   position:absolute;
-  inset:1px;
-  border-radius: calc(var(--radius) - 1px);
-  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
+  inset: 2px; /* separa el borde (grosor real) */
+  border-radius: calc(var(--radius) - 2px);
+  background: rgba(10, 12, 28, 0.86);
 }
 
-.card > *{ position: relative; z-index:1; }
+.card > *{ position: relative; z-index: 1; }
 
-.card:hover::before{ opacity:1; }
 .card:hover{
   transform: translateY(-6px);
   box-shadow: 0 18px 60px rgba(0,0,0,.45);
 }
 
+/* En hover, que el borde “respire” más */
+.card:hover::before{
+  opacity: 1;
+}
+
 /* =========================
    9) Proyectos
    ========================= */
@@ -408,7 +428,7 @@ p{ color: var(--muted); line-height:1.7; }
 .contact-arrows{
   display:flex;
   justify-content:center;
-  gap: 120px;
+  gap: 90px;
   margin: 6px 0 12px;
 }
 
@@ -433,8 +453,8 @@ p{ color: var(--muted); line-height:1.7; }
 }
 
 .btn-icon{
-  width: 1.1em;
-  height: 1.1em;
+  width: 22px;   /* antes 1.1em */
+  height: 22px;
   object-fit: contain;
   transform: translateY(1px);
   filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
@@ -484,10 +504,28 @@ p{ color: var(--muted); line-height:1.7; }
     grid-template-columns: 1fr;
   }
 
+  /* El UL no debe meter padding/margin */
   #services-list{
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    list-style:none;
+    padding:0;
+    margin:0;
+
+    /* y que el grid quede “centrado” en su contenedor */
+    justify-items: stretch;
+  }
+
+  /* El grid general */
+  #services-list{
+    display:grid;
+    gap:16px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+
+  #services .section,
+  #services.section{
+    padding-left: 20px;
+    padding-right: 20px;
+    backdrop-filter: blur(0px); /* evita rarezas si tenías filtros */
   }
 
   h1{ font-size: clamp(26px, 8vw, 34px); }
@@ -499,7 +537,7 @@ p{ color: var(--muted); line-height:1.7; }
 .nav-left{
   display:flex;
   align-items:center;
-  gap: 14px;
+  gap: 26px; /* antes ~14px */
 }
 
 .brand img{
@@ -510,6 +548,7 @@ p{ color: var(--muted); line-height:1.7; }
   display:flex;
   align-items:center;
   gap: 10px;
+  margin-left: 8px;
 }
 
 .search{