detalles finalizados v0.8.3 lista

css/styles.css

@@ -263,6 +263,8 @@ p, li, .lead-text, .text-body, .text-muted {
 .section-padding {
   padding-top: clamp(3.5rem, 7vw, 6.5rem);
   padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
+  position: relative;
+  overflow: hidden;
 }
 
 .section-padding-sm {
@@ -273,6 +275,17 @@ p, li, .lead-text, .text-body, .text-muted {
   padding-top: clamp(1rem, 2vw, 3.5rem);
 }
 
+.bg1{
+  background: radial-gradient(circle at 20% 80%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
+}
+.bg2{
+  background: radial-gradient(circle at 80% 20%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
+}
+.bg3{
+  background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body);
+}
+
+
 /* --- 5. Componentes: Header & Navbar --- */
 #site-header {
   position: sticky;
@@ -999,12 +1012,6 @@ p, li, .lead-text, .text-body, .text-muted {
 }
 
 /* --- 8. Hero: La Doble Entrada (Home) --- */
-.section-padding {
-  background: radial-gradient(circle at 80% 20%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
-  /*border-bottom: 1px solid var(--border-color);*/
-  position: relative;
-  overflow: hidden;
-}
 
 .hero-grid {
   display: grid;
@@ -1489,7 +1496,54 @@ p, li, .lead-text, .text-body, .text-muted {
   color: white;
 } 
 
+.pills-list {
+  display: block;
+  line-height: 2.4;
+  margin-bottom: 1.5rem;
+}
 
+.pill-item {
+  display: inline-block !important; /* Se comporta exactamente como una palabra */
+  width: auto !important;
+  white-space: nowrap;              /* Evita que el texto de una píldora se corte en dos */
+  vertical-align: middle;
+  
+  padding: 0.35rem 0.85rem;
+  margin-right: 0.45rem;
+  margin-bottom: 0.4rem;
+  
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-body);
+  background-color: var(--bg-subtle);
+  border: 1px solid var(--border-color);
+  border-radius: 9999px;
+  line-height: 1.2;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.pill-item:hover {
+  border-color: var(--ide-primary);
+  color: var(--ide-primary);
+  background-color: var(--bg-surface);
+}
+
+.card-project .pill-item:hover{
+  border-color: var(--ide-projects);
+  color: var(--ide-projects);
+  background-color: var(--bg-surface);
+}
+.card-digital .pill-item:hover{
+  border-color: var(--ide-digital);
+  color: var(--ide-digital);
+  background-color: var(--bg-surface);
+}
+.card-academy .pill-item:hover{
+  border-color: var(--ide-academy);
+  color: var(--ide-academy);
+  background-color: var(--bg-surface);
+}
 /* --- 13. Modales (Pop-ups de Desafíos y Cursos) --- */
 .dfcard1{
   background: linear-gradient(0deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%);
@@ -2376,6 +2430,68 @@ canvas {
   transform: translateY(-2px);
 }
 
+/* ==========================================================================
+   Fondo Fijo Tipo Ventana (Fixed Background Parallax)
+   ========================================================================== */
+.contact-parallax-section {
+  position: relative;
+  background-color: var(--bg-surface);
+}
+
+.parallax-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.parallax-bg-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  
+  /* Imagen de fondo */
+  background-image: url('../assets/img/academia-incompany.jpg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  
+  /* CLAVE: Deja la imagen fija en el viewport mientras el sitio scrollea */
+  background-attachment: fixed;
+  
+  /* Estética sobria IDE */
+  filter: grayscale(100%);
+  opacity: 0.1;
+}
+
+/* Cortina suave en bordes superior e inferior para fundir con el header/footer */
+.parallax-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    var(--bg-surface) 0%,
+    transparent 12%,
+    transparent 88%,
+    var(--bg-surface) 100%
+  );
+}
+
+/* Las tarjetas mantienen fondo sólido para tapar la foto a su paso */
+.contact-parallax-section .card {
+  background-color: var(--bg-surface);
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
+}
+
 /* --- 17. Footer --- */
 #site-footer {
   position: relative;