somos finish

css/styles.css

@@ -751,6 +751,104 @@ p, li, .lead-text, .text-body, .text-muted {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
 }
+/* tarjeta nosotros*/
+.card-somos {
+  background-image: url('../assets/img/equipo.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: 21/9;   /* ← 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);
+}
+
+.card-feature {
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.card-feature .card-icon {
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  width: 120px;
+  height: 120px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 0;
+
+  /* Máscara común (forma) */
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+
+  /* Color de fondo = color del SVG (lo cambiamos por card abajo) */
+  background-color: currentColor;
+
+  /* Opacidad controlada por vos */
+  opacity: 0.1;
+
+  transition: transform 0.5s ease, opacity 0.5s ease, right 0.5s ease;
+}
+
+.card-feature:hover .card-icon {
+  right: 50%;
+  transform: translate(50%, -50%) scale(1.05);
+  opacity: 0.1;
+}
+
+.card-feature h4,
+.card-feature p {
+  position: relative;
+  z-index: 1;
+}
+/* Card 1: Normas ISO */
+.card-feature:has([data-icon="iso"]) .card-icon,
+[data-icon="iso"] {
+  -webkit-mask-image: url('../assets/vectores/iso.svg');
+          mask-image: url('../assets/vectores/iso.svg');
+  background-color: var(--ide-excellence);
+}
+
+/* Card 2: PMI & Agile */
+.card-feature:has([data-icon="pmi"]) .card-icon,
+[data-icon="pmi"] {
+  -webkit-mask-image: url('../assets/vectores/trofeo.svg');
+          mask-image: url('../assets/vectores/trofeo.svg');
+  background-color: var(--ide-projects);
+}
+
+/* Card 3: Adult Learning */
+.card-feature:has([data-icon="academy"]) .card-icon,
+[data-icon="academy"] {
+  -webkit-mask-image: url('../assets/vectores/capacitacion.svg');
+          mask-image: url('../assets/vectores/capacitacion.svg');
+  background-color: var(--ide-academy);
+  opacity: 0.3;
+}
+
+/* Card 4: IA & Automatización */
+.card-feature:has([data-icon="ia"]) .card-icon,
+[data-icon="ia"] {
+  -webkit-mask-image: url('../assets/vectores/ia.svg');
+          mask-image: url('../assets/vectores/ia.svg');
+  background-color: var(--ide-digital);
+  opacity: 0.3;
+}
+/*--------------------------------------------------------------*/
 
 .grid-2 {
   display: grid;
@@ -1557,6 +1655,24 @@ canvas {
   color: #cfd4dc;
   line-height: 1.35;
 }
+/*   somos ide  */
+.card-portrait {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  overflow: hidden;          /* recorta la imagen al círculo */
+  margin: 0 auto 1.25rem auto;
+  border: 2px solid var(--border-color);   /* opcional: anillo sutil */
+  background-color: var(--bg-muted);       /* color de respaldo mientras carga */
+}
+
+.card-portrait img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;         /* evita deformación, recorta si es necesario */
+  object-position: center;   /* podés ajustar a "top" si la cara queda baja */
+  display: block;
+}
 /* --- 17. Footer --- */
 #site-footer {
   position: relative;