/* ══════════════════════════════════════════════════════════════════════════
   equipo.css
   Tarjeta del equipo
   Procede de styles.css (secciones 11) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 11. EQUIPO ═══════════════ */
.tarjeta-abogado {
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-suave);
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-abogado:hover {
  border-color: var(--color-acento);
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
}

/* El retrato va envuelto en <picture> para servir WebP con respaldo JPEG.
   El <picture> es inline por defecto, así que se fuerza a bloque: si no, deja
   un hueco bajo la imagen y no puede estirarse como columna de la tarjeta. */
.tarjeta-abogado picture {
  display: block;
  line-height: 0;
}
.tarjeta-abogado__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--color-fondo-alterno);
}
.tarjeta-abogado__cuerpo { padding: 1.35rem; }

.tarjeta-abogado__nombre {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tinta);
}
.tarjeta-abogado__rol {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}
.tarjeta-abogado__bio {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-texto-suave);
}

/* ── Variante de UNA sola persona ──────────────────────────────────────────
   Ocupa todo el ancho disponible. Para que el retrato no se convierta en una
   fotografía gigante, la tarjeta pasa a dos columnas: retrato acotado a la
   izquierda y texto a la derecha. En móvil se apila como cualquier tarjeta.
   Al quitar esta clase, la tarjeta vuelve al formato vertical de columna. */
@media (min-width: 768px) {
  .tarjeta-abogado--unica {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    align-items: stretch;
  }
  /* El retrato llena la altura de la tarjeta, que la fija el texto de al lado.
     `aspect-ratio: auto` desactiva la proporción 4:5 en este caso concreto:
     aquí manda la altura, no la proporción. */
  .tarjeta-abogado--unica picture { height: 100%; }
  .tarjeta-abogado--unica .tarjeta-abogado__foto {
    height: 100%;
    aspect-ratio: auto;
  }
  .tarjeta-abogado--unica .tarjeta-abogado__cuerpo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.25rem;
  }
  .tarjeta-abogado--unica .tarjeta-abogado__nombre { font-size: 1.35rem; }
  .tarjeta-abogado--unica .tarjeta-abogado__bio { font-size: 0.98rem; max-width: 60ch; }
}
@media (min-width: 1024px) {
  .tarjeta-abogado--unica { grid-template-columns: 300px 1fr; }
  .tarjeta-abogado--unica .tarjeta-abogado__cuerpo { padding: 2.75rem 3rem; }
}
/* Sin hover de elevación: al ser un bloque grande, el desplazamiento distrae. */
.tarjeta-abogado--unica:hover { transform: none; }