academy finish

css/styles.css

@@ -24,6 +24,7 @@
   --teal-dark:   #1B5E6E;
   --cta-hover:#40ab8e;
   --bg-subtle: #ecf9fd;
+  --ide-accent-bg:rgba(79,179,137, 0.3);
 
   /* Tema Claro (Por defecto) */
   --bg-body: #F8FAFB;
@@ -1673,6 +1674,181 @@ canvas {
   object-position: center;   /* podés ajustar a "top" si la cara queda baja */
   display: block;
 }
+
+.card-incompany {
+  background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/incompany.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1.5px solid var(--teal-dark);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  transition: all var(--transition-normal);
+  display: flex;
+  gap: 1rem;
+
+}
+
+.card-incompany:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+
+.card-cursos {
+  background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/cursos.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 1.5px solid var(--teal-dark);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  transition: all var(--transition-normal);
+  display: flex;
+  gap: 1rem;
+}
+
+.card-cursos:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Barra roja con el ícono */
+.card-cursos-icon {
+  color: var(--text-main);
+  width: 3rem;                /* ancho fijo */
+  min-width: 3rem;            /* evita que se encoja */
+  align-self: stretch;        /* ocupa toda la altura del contenido */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+/* Contenido de texto */
+.card-cursos-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.card-academia {
+  background-image: url('../assets/img/academia.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-normal);
+  position: relative;
+  aspect-ratio: 3/2;   /* ← ajustá según tu imagen (16/9, 3/2, 21/9...) */
+  width: 100%;
+}
+
+.card-somos:hover {
+  border-color: var(--ide-accent);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+/* Badge de Categoría superior */
+.course-header-top {
+  margin-bottom: 0.85rem;
+}
+
+.course-badge-category {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ide-academy, #0c4a60);
+  background-color: color-mix(in srgb, var(--ide-academy, #0c4a60) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ide-academy, #0c4a60) 25%, transparent);
+  padding: 0.28rem 0.75rem;
+  border-radius: 999px;
+}
+
+/* Panel contenedor tipo Grid */
+.course-specs-panel {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+  background: var(--bg-subtle);
+  border-radius: 12px;
+  padding: 0.9rem;
+  margin-bottom: 1.75rem;
+}
+
+/* Celda / Tarjeta interna */
+.spec-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--border-color);
+  padding: 0.65rem 0.85rem;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+/* Cajas de iconos con tintes cromáticos */
+.spec-icon-box {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spec-icon-blue   { background-color: var(--ide-accent-bg); color: var(--ide-primary); }
+.spec-icon-purple { background-color: var(--ide-accent-bg); color: var(--ide-primary); }
+.spec-icon-teal   { background-color: var(--ide-accent-bg); color: var(--ide-primary); }
+.spec-icon-amber  { background-color: var(--ide-accent-bg); color: var(--ide-primary); }
+
+/* Tipografía de las especificaciones */
+.spec-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.spec-label {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-main);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.spec-value {
+  font-size: 0.82rem;
+  color: var(--text-main);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 2px;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.spec-value.highlight-date {
+  color: var(--ide-academy);
+}
+
+/* Responsive: 1 columna en pantallas móviles */
+@media (max-width: 520px) {
+  .course-specs-panel {
+    grid-template-columns: 1fr;
+    padding: 0.65rem;
+    gap: 0.5rem;
+  }
+}
+
 /* --- 17. Footer --- */
 #site-footer {
   position: relative;