/* Funciones clave: piezas en rejilla de dos (la última, a lo ancho). Cada una lleva su icono de
   proyecto, un título, una frase y un recorte de la app de verdad. */
.como-head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 40px); }

.como-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.como-pieza {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  background: var(--tarjeta);
  box-shadow: var(--sombra);
  transition: transform var(--dur-normal) var(--ease-out-expo), box-shadow var(--dur-normal);
}
.como-pieza:hover { transform: translateY(-3px); box-shadow: var(--sombra-flotante); }
.como-t { font-size: 20px; margin: 18px 0 4px; color: var(--tinta); }
.como-d { font-size: 15.5px; margin: 0 0 18px; color: var(--tinta-suave); }

/* El icono: el de la app, en el amarillo de la marca, sobre una placa oscura. */
.func-icono {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-m);
  background: var(--tarjeta-alta);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--marca);
}
.func-avatares { display: inline-flex; gap: 0; padding-left: 6px; justify-content: flex-start; }
.av {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-style: normal; font-size: 12px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 2px var(--tarjeta-alta);
}
.av + .av { margin-left: -6px; }
.func-avatares--tres { width: auto; padding-inline: 8px; justify-self: start; }
.av-claude { background: var(--claude); }
.av-codex { background: var(--codex); }
.av-gmail { background: #EA4335; }
.av-slack { background: #4A154B; }
.av-notion { background: #191919; }

/* El recorte de la app: todos a la misma proporción, para que las tarjetas de una
   fila acaben igual. Lo que sobra se rellena con el fondo de la app, que es el de
   la tarjeta: no se nota el borde. */
.como-foto {
  display: block; margin-top: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #1E1E1E;
  box-shadow: inset 0 0 0 1px var(--linea);
}
.como-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Con las fotos en claro (tema Atelia de la app), su fondo crema. */
:root[data-fotos="claro"] .como-foto { background: #FFFCF8; }

/* La pieza ancha: el texto a la izquierda y la foto, más grande, a la derecha. */
.como-pieza--ancha {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(22px, 3vw, 40px);
  align-items: center;
}
.como-pieza--ancha .func-icono, .como-pieza--ancha .como-texto { grid-column: 1; }
/* A lo ancho, cada foto con su proporción (la reservan el width y height del img). */
.como-pieza--ancha .como-foto { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; aspect-ratio: auto; }
.como-pieza--ancha .como-foto img { height: auto; }
.como-pieza--ancha .como-texto { align-self: start; }
/* Al revés: la foto a la izquierda, para que dos anchas seguidas no se repitan. */
.como-pieza--al-reves { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.como-pieza--al-reves .func-icono, .como-pieza--al-reves .como-texto { grid-column: 2; }
.como-pieza--al-reves .como-foto { grid-column: 1; }
.como-pieza--ancha .func-icono { align-self: end; }

@media (max-width: 820px) {
  .como-pieza--ancha { display: flex; align-items: stretch; }
  .como-pieza--ancha .func-icono, .como-pieza--ancha .como-texto { align-self: flex-start; }
  .como-pieza--ancha .como-foto { margin-top: auto; }
}
@media (max-width: 620px) {
  .como-grid { grid-template-columns: 1fr; }
}